Autocomplete does not Highlights default Value

  filter, javascript, material-ui, reactjs

Somehow my default Value of my Autocomplete does not get selected.
It only gets selected after you click it from the menu yourself.

Assumption
Could this maybe come from the filter method because this return a new Object reference and therefore its not possible to preselect inside the Menu ?

Data-Set Sample

...
    { icon: '🇵🇫', name: 'French Polynesia', abbr: 'PF', code: '689' },
    { icon: '🇹🇫', name: 'French Southern Territories', abbr: 'TF', code: '262' },
    { icon: '🇬🇦', name: 'Gabon', abbr: 'GA', code: '241' },
    { icon: '🇬🇲', name: 'Gambia', abbr: 'GM', code: '220' },
    { icon: '🇬🇪', name: 'Georgia', abbr: 'GE', code: '995' },
    { icon: '🇩🇪', name: 'Germany', abbr: 'DE', code: '49', suggested: true },
...

Autocomplete Component

<Autocomplete
    fullWidth
    id="grouped-countries"
    options={options.sort(
        (a, b) => -b.groupLabel.localeCompare(a.groupLabel),
    )}
    defaultValue={
        //Pass Object with name Germany as Default!
        options.filter((obj) => obj.name === 'Germany')[0]
    }
    groupBy={(option) => option.groupLabel}
    noOptionsText="keine passendes Land"
    getOptionLabel={(option) => option.name}
    renderInput={(params) => (
        <TextField
            variant="outlined"
            {...params}
            fullWidth
            label="Land"
            defaultValue={
                //Set Default Input Value to Germany!
                options.filter((obj) => obj.name === 'Germany')[0].name
            }
            className={classes.input}
        />
    )}
    Menu
/>

Output // Example

https://codesandbox.io/s/material-ui-autocomplete-fail-7uh04

Source: Ask Javascript Questions

LEAVE A COMMENT