Material-ui: [Auto Complete] Clear value issue

[simonelp]

Problem description

When i try to clear the value of the TextField passing searchText props, after select one item from the menu, the value want change.

I'm using the onNewRequest callback, but it's called before setState with selected value.
Also trying to change searchText props with a setTimeout (after the setState function has been called), the check in componentWillReceiveProps doesn't let the state to be changed.

Steps to reproduce

• create an Autocomplete controlled component passing it searchText, onNewRequest and dataSource
• in onNewRequest callback get the selected value and call a function that clear the searchText value in your state (the same searchText you pass to the component)
• search and select one value in your app

You can see that the value doesn't change as its searchText props.

Versions

• Material-UI: 0.15.0.beta-2
• React: 15.0.2
• Browser: Google Chrome v 50.0.2661.94

[ochowie]

I'm having the same issue in the 0.15.0 release. I'm encountering this under slightly different circumstances where I was trimming the text in searchText after selection and it works but then something seems to overwrite it and the entire selected text comes back. I see something similar when I try to completely clear the field. The field is cleared temporarily and then the value selected from the dropdown returns.

[ochowie]

I've created a simple example using the example code from the documentation. This will first clear the control then write back the selected value.

[mauvew]

any further action on this issue? Clearing the display value after selecting seems quite important, if the auto complete component is used as a search box

[priezz]

As a workaround I do

const autoComplete = <your ref to AutoComplete>
setTimeout( () => autoComplete && autoComplete.setState({ searchText: "" }), 500 )

in the callback. In this case it works.

[nicodee]

@priezz Thanks a lot man. Spent a whole day trying to figure this out.

[oliviertassinari]

It should be fixed now. The setTimeout hack should no longer be needed.

[FrancoisJULIENNE]

Try this :
this.setState({ searchText: "\r" });

because I think the function should test the length of the string (BUG ?)

[TheCodeNinja254]

I could use some help,
I am able to clear the value after submit by clearing the Form. The previously selected item, however, still remains in the text field. I need to clear this since I am loading the list dynamically and 'refetching' after every submit. See code below:

<Autocomplete
                        onChange={(event, selectedValue) => setFieldValue('SerialNumber', selectedValue, true)}
                        clearText = 'Clear'
                        options={getSerials.serials.map((routers) => serials.SerialNumber)}
                        autoComplete
                        openOnFocus
                        noOptionsText = 'No serial number to match your search'
                        renderInput={(params) => (
                          <TextField
                            {...params}
                            label="Search/Enter serial number"
                            required
                            name="SerialNumber"
                            helperText={
                              errors.SerialNumber || null
                            }
                            variant="outlined"
                            value={values.SerialNumber}
                            SelectProps={{ native: true }}
                          />
                        )}
                      />

[oliviertassinari]

@TheCodeNinja254 Look into how you can control the value of the component, alternatively, you can ask on Stackoverflow.