Material UI Autocomplete component not showing values from react state

Question

I am trying to get value from the state for materialUI's autocomplete component.

I am facing the following problem : -

Autocomplte working fine for selecting the value and with onChange function it saving it into the state too. But when I refresh my page/ re-render it is not showing value on the textfeild(from saved state):

<Autocomplete
    name={"TideLocation"}
    disabled={p.disabled}
    options={data_source}
    getOptionLabel={option => option.text}
    inputValue={this.state.tidelocation_searchtext}
    onChange={_this.handleUpdateTideLocationField}
    onNewRequest={_this.handleChangeTideLocation}
    onBlur={_this.handleBlurTideLocationField}
    onUpdateInput={_this.handleUpdateTideLocationField}
      renderInput={(params) => (
       <TextField className="autoCompleteTxt"{...params} label="Location" />
    )}
/>

I tried with the debugger and found its getting value in this.state.tidelocation_searchtext but failed to set it with params.

Thanks in advance !! Ps: I tried with defaultValue and search text nothing worked for me

following is my ONchangeFunction

  handleUpdateTideLocationField = (str, value) => {
        debugger
        this.setState({tidelocation_searchtext: value.text});
    }

after selecting a value,following value saved in sate :

tidelocation_searchtext: "Auckland"

How to create a Minimal, Reproducible Example, we can't guess what are the state values and how you rendering the component — Dennis Vash
– Dennis Vash, Commented Jan 28, 2020 at 11:03

DevCo · Accepted Answer · 2020-02-05 04:26:59Z

So I found the solution all by myself by doing research and several hit and try, following is the solution of my problem:

<Autocomplete
  name={"TideLocation"}
  disabled={p.disabled}
  options={data_source.map(option=>option.text)} 
  defaultValue={this.state.tidelocation_searchtext}
  onChange={_this.handleUpdateTideLocationField}
  onNewRequest={_this.handleChangeTideLocation}
  onBlur={_this.handleBlurTideLocationField}
  onUpdateInput={_this.handleUpdateTideLocationField}
  renderInput={(params) => (
  <TextField className="autoCompleteTxt"{...params} label="Location" />
 )}
/>

Basically I was doing the following things wrong :

1.There is no need of using input inputValue={this.state.tidelocation_searchtext}& getOptionLabel={option => option.text}

2.as my data is in object form I have to convert it into a string so default value can match this from the state value options={data_source.map(option=>option.text)}

Thank you all for your valuable support and solution !!

Hafiz Temuri · Accepted Answer · 2022-05-16 05:48:24Z

2

Removing inputValue has worked for me, even when passing object as options.

Using: "@material-ui/core": "^4.12.3"

answered May 16, 2022 at 5:48

Hafiz Temuri

4,1928 gold badges45 silver badges72 bronze badges

Comments

Sygel4456 · Accepted Answer · 2020-06-17 10:28:24Z

1

You are right, if object type options are passed, material-ui's AutoComplete component does not seem to reflect the value when mounted. (Perhaps a bug?)

I was able to get around this by passing the proper characters to inputValue.

@RebelCoder

Maybe you should have initialized tidelocation_searchtext.

answered Jun 17, 2020 at 10:28

Sygel4456

945 bronze badges

Comments

Yoann Buzenet · Accepted Answer · 2022-09-23 15:01:46Z

1

For me it was coming from the dropdown z-index which was hidden by another css behaviour.

I added this in a css file :

/* Dropdown MUI Component Autocomplete*/
div[role="presentation"].MuiAutocomplete-popper {
  z-index: 1000000;
}

And it appeared finally. A bit hacky, but I think it was caused by another library that had something of that kind.

Note that I added several css elements to the selector, because just using the class wasn't enough.

answered Sep 23, 2022 at 15:01

Yoann Buzenet

9292 gold badges8 silver badges16 bronze badges

Comments

xadm · Accepted Answer · 2020-01-28 11:30:43Z

0

If data/state not saved externally f.e. in local storage then it will be lost on page refresh, always. It's normal - like RAM memory without power - it (page/app state) only exists in memory !!

It's like using using cookie to keep you logged in.

If you really need such functionality then use f.e. redux-persist

answered Jan 28, 2020 at 11:30

xadm

8,4463 gold badges17 silver badges27 bronze badges

6 Comments

DevCo Over a year ago

I am using already using redux for state management, with the help of debugger I can see the state with its value is rendring properly. just not able to passs to to autocomplte > textfeild > params

xadm Over a year ago

setState uses local component state, there is no redux - show this parts

DevCo Over a year ago

I am working on docker values are saving into database

xadm Over a year ago

that gives ZERO informations about the problem - every kestroke in search input goes to DB?! input is used for querying DB but entered value IS NOT SAVED/STORED anywhere beside component state (ALWAYS lost on page refresh) - if it must survive browser page refresh then it must be stored persistantly

xadm Over a year ago

if you're using redux then use mapToStateProps and this.props.someSearchText as inputValue - use dispatch (and reducer) to change value in store, prop will be updated

|

Collectives™ on Stack Overflow

Material UI Autocomplete component not showing values from react state

5 Answers 5

Comments

Comments

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related