Autocomplete - How can I set a default value?

I tried all the above solutions and nothing worked. Perhaps the API has changed since then.

I finally figured out a solution. It's not so elegant, but in principle it makes sense. In my case the options are objects. I just had to set the "value" prop using the exact item from my options array. This way componentDidMount and getOptionSelected aren't needed.

Autocomplete is wrapped inside another component in our case. This is the main code:

class CTAutoComplete extends React.PureComponent {

  getSelectedItem(){
    const item = this.props.options.find((opt)=>{
      if (opt.value == this.props.selectedValue)
        return opt;
    })
    return item || {};
  }

  render() {
    return (
        <Autocomplete
            id={this.props.id}
            className={this.props.className}
            style={{ width: '100%' }}
            options={this.props.options}
            getOptionLabel={this.props.getOptionLabel}
            renderInput={params => (
                <TextField {...params} label={this.props.label} variant="outlined" />
            )}
            onChange={this.props.onChange}
            value={this.getSelectedItem()}
        />
    );
  }
}

IMPORTANT: When setting "value", you have to make sure to put the null case " || {} ", otherwise React complains you are changing from an uncontrolled to controlled component.

You can achieve this by setting the appropriate state in componentDidMount, for example:

componentDidMount() {
    // load your items into your autocomplete

    // set your default selected item
    this.setState({ allItems: [itemYouWantToSet], selectedItem: item.name, selectedItemId: item.id }
}

render() {
    return (
		<Autocomplete
		    value={this.state.selectedItem}
		    items={this.state.allItems}
		    getItemValue={(item) => item.name}
		    onSelect={(value, item) => {
		        this.setState({ selectedItem: value, selectedItemId: value, allItems: [item] });
		    }}
		/>
    )
}

Then your item is correctly selected from the list of available options when it loads.

you can provide the defaultValue prop for AutoComplete.

like defaultValue={{ label: 'Select an option', id: 'someID' }}

<Autocomplete
    multiple
    id="tags-outlined"
    options={this.state.categories}
    getOptionLabel={(option) => option.category_name}
    onChange={this.handleAutocomplete}
    defaultValue={'yourDefaultStringValue'} //put your default value here. It should be an object of the categories array.
    filterSelectedOptions
    renderInput={(params) => (
        <TextField
            fullWidth
            {...params}
            variant="outlined"
            label="Add Categories"
            placeholder="Category"
            required        
        />
    }
/>

This approach works for me (using hooks):

First of all define the options you need in a variable:

const genderOptions = [{ label: 'M' }, { label: 'V' }];

Second you can define a hook to store the selected value (for example store it in session storage for when the page refreshes, or use useState directly):

const age = useSessionStorage('age', '');

Next you can define your Autocomplete as follows (notice the default values in value and getOptionLabel, if you omit those you'll get those controlled to uncontrolled warnings):

  <Autocomplete
    id="id"
    options={ageOptions}
    getOptionLabel={option => option.label || ""}
    value={ageOptions.find(v => v.label === age[0]) || {}} // since we have objects in our options array, this needs to be a object as well
    onInputChange={(_, v) => age[1](v)}
    renderInput={params => (
      <TextField {...params} label="Leeftijd" variant="outlined" />
    )}
  />

The api docs suggest the best approach in the current version (June 2022) is to use value and isOptionEqualToValue.

So for example, if I have a list of users and am choosing which user this thing is assigned to:

  const [assignedTo, setAssignedTo] = useState(initialOption);

  return (<Autocomplete
    options={users.map((i) => ({
        label: i.name,
        value: i._id,
    }))}
    isOptionEqualToValue={(o, v) => o.value === v.id}
    value={assignedTo}
    onChange={(evt, val) => setAssignedTo(val)}
    renderInput={(params) => (
        <TextField {...params} label="Assigned To" />
    )}
  />);

It is tricky specially in case of you are using along with filter option which load API on every filter. I was able to load initial value by setting up within state and onInputChange option.

Below is code that work for me or click below link for full working demo.

https://codesandbox.io/s/smoosh-brook-xgpkq?fontsize=14&hidenavigation=1&theme=dark

import React, { useState, useEffect } from "react";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function CreateEditStrategy({ match }) {
  const [user, setUser] = useState({
    _id: "32778",
    name: "Magic User's Club!"
  });
  const [filter, setFilter] = useState("");
  const [users, setUsers] = useState([]);
  const [openAutoComplete, setOpenAutoComplete] = React.useState(false);

  useEffect(() => {
    (async () => {
      //Will not filter anything for testing purpose
      const response = await fetch(
        `https://api.tvmaze.com/search/shows?q=${filter}`
      );
      const shows = await response.json();

      setUsers(
        shows.map((a, i) => {
          return { _id: a.show.id, name: a.show.name };
        })
      );
    })();
  }, [filter]);
  return (
    <div>
      <Typography variant="h6">Autocomplete</Typography>
      <Autocomplete
        open={openAutoComplete}
        onOpen={() => setOpenAutoComplete(true)}
        value={user}
        inputValue={filter}
        onClose={() => setOpenAutoComplete(false)}
        onChange={(event, user) => {
          if (user) setUser(user);
          else setUser({ _id: "", name: "" });
        }}
        onInputChange={(event, newInputValue) => setFilter(newInputValue)}
        getOptionSelected={(option, value) => option.name === value.name}
        getOptionLabel={(option) => option.name}
        options={users}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Asynchronous"
            variant="outlined"
            InputProps={{
              ...params.InputProps
            }}
          />
        )}
      />
    </div>
  );
}

Call your component like this

<SelectCountryAutosuggest searchText="My Default Value" />

Make sure you apply the default value to state on class load

class SelectCountryAutosuggest extends React.Component {
  state = {
    value: this.props.searchText, //apply default value instead of ''
    suggestions: [],
  };
...
}

We can setup initial value through value property of Autocomplete component

<Autocomplete
   fullWidth={true}
   label={'Location'}
   margin={'noraml'}
   multiple={false}
   name={'location'}
   getOptionSelected={useCallback((option, value) => option.value === value.value)}
   value={formValues.location === '' ? {label: ''} : {label: formValues.location}}
   options={location}
   ref={locationRef}
   onChange={useCallback((e, v) => handleInputChange(e, v))}
/>

<Autocomplete
    name="category_id"
    options={this.state.productList}
    //this selectPoduct is the filterd object of productList
    value={selectProduct || {product_name: ""}}
    getOptionLabel={(options) =>
    options.product_name
    }
    renderInput={(params) => (
    <TextField
    {...params}
    variant="outlined"
    />
    )}
    onChange={(e, newValue={}) => {
    this.handleChange({target: {name: 
    "product_id", value: newValue.id || ""}});
    }}
    size="small"
/>

100% working for mui v4

You can use the searchText property.

<AutoComplete searchText="example" ... />

Try this...

componentWillReceiveProps(nextProps) {
    let value = nextProps.value
    if (value) {
      this.setState({
        value: value
      })
    }
  }

onUpdateInput worked for me - for anyone looking through all this as I was