Issue with async default value in React Material UI Autocomplete

Question

I am using 'Material UI' Autocomplete component to render a dropdown in my form. However, in case the user wants to edit an object then the dropdown should be displayed as autofilled with whatever value that's being fetched from the database.

I've tried to mock the situation using below code

import React, { Component } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';

export default class Sizes extends Component {
    state = {
        default: []
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({ default: [...this.state.default, top100Films[37]]})
        })
    }

    render() {
        return (
                <Autocomplete
                    id="size-small-standard"
                    size="small"
                    options={top100Films}
                    getOptionLabel={option => option.title}
                    defaultValue={this.state.default}
                    renderInput={params => (
                        <TextField
                            {...params}
                            variant="standard"
                            label="Size small"
                            placeholder="Favorites"
                            fullWidth
                        />
                    )}
                />
        );
    }
}

Here after the component is mounted, I'm setting a timeout and returning the default value that should be displayed in the dropdown

However, it's unable to display the value in the dropdown and I'm seeing this error in console -

index.js:1375 Material-UI: the `getOptionLabel` method of useAutocomplete do not handle the options correctly.
The component expect a string but received undefined.
For the input option: [], `getOptionLabel` returns: undefined.

Apparently the state is getting updated when componentDidMount is getting called but the Autocomplete component's defaultValue prop is unable to read the same

Any idea what I might be getting wrong here?

Code sandbox link - https://codesandbox.io/s/dazzling-dirac-scxpr?fontsize=14&hidenavigation=1&theme=dark

Dale King · Accepted Answer · 2020-03-10 07:09:07Z

7

For anyone else that comes across this, the solution to just use value rather than defaultValue is not sufficient. As soon as the Autocomplete loses focus it will revert back to the original value.

Manually setting the state will work however:

https://codesandbox.io/s/elegant-leavitt-v2i0h

answered Mar 10, 2020 at 7:09

Dale King

9151 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tron · Accepted Answer · 2020-07-30 06:06:04Z

3

Following reasons where your code went wrong:

1] defaultValue takes the value which has to be selected by default, an array shouldn't be passed to this prop.

2] Until your autocomplete is not multiple, an array can't be passed to the value or inputValue prop.

answered Jul 30, 2020 at 6:06

Tron

6367 silver badges8 bronze badges

Comments

trurohit · Accepted Answer · 2019-12-26 09:33:15Z

1

Ok I was actually able to make this work. Turns out I was using the wrong prop. I just changed defaultValue to value and it worked.

Updated code pen link - codesandbox.io/s/dazzling-dirac-scxpr

answered Dec 26, 2019 at 9:33

trurohit

4511 gold badge12 silver badges21 bronze badges

Collectives™ on Stack Overflow

Issue with async default value in React Material UI Autocomplete

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related