CODEWITHSUNDEEP
reactjsmaterial-ui
Pranav
Pranav

Reputation: 1646

How to open the dropdown list in Autocomplete Material-UI by default?

In an Autocomplete Form, the data for country and its relevant codes are displayed. When the input text is focused the drop-down list is populated. My intention is to pre load array of data without focus requirement. See the code for example

const [newValue, setNewValue] = useState(null);
const [textToggle, textToggleState] = useState(false);

render(
         <div
          style={{ cursor: "pointer" }}
          onClick={() => {
            textToggleState(!textToggle);
          }}
        >
          <h5>+{newValue == null ? "91" : newValue.calling_code}</h5>
        </div>
        {textToggle ? (
          <Autocomplete
            id="size-small-standard"
            size="small"
            options={cities}
            onChange={(event, value) => {
              setNewValue(value);
              textToggleState(!textToggle);
            }}
            autoSelect={true}
            getOptionLabel={(option) =>
              `${option.country}` + `+ ${option.calling_code}`
            }
            renderOption={(option) => (
              <>{`${option.country} + ${option.calling_code}`}</>
            )}
            //defaultValue={cities[98]}
            style={{ width: "100%" }}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                placeholder="Search your country"
                style={{ width: "40%" }}
              />
            )}
          />
        ) : (
          ""
        )}
  </div>
)

Here you can see data is displayed on input text focus. What could be the best possible solution to pre-load data?

CodeSandbox Link: https://codesandbox.io/s/how-to-add-only-single-value-from-autocomplete-in-material-ui-forked-tu218

Upvotes: 7

Views: 9813

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81400

Just take control of the open state of the Autocomplete and set the default value to true:

export default function ComboBox() {
  // default value to true to open at first render
  const [open, setOpen] = useState(true);

  return (
    <Autocomplete
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      options={top100Films}
      getOptionLabel={(option) => option.title}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

Live Demo

Edit 67043434/how-to-pre-load-the-drop-down-list-in-autocomplete-material-ui

Upvotes: 7

Hari Kishore
Hari Kishore

Reputation: 2880

I think what you need is to use AutoComplete as Combobox.

<Autocomplete
  id="combo-box-demo"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  style={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>

This will pre-populate it.

Visit this: https://material-ui.com/components/autocomplete/#combo-box

Hope it helps. if not, please elaborate your question if you want something else.

Upvotes: 0

Related Questions