[AutoComplete] List is not filtered when using onChange and onInputChange together

[Aerowiel]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When i'm using both onChange and onInputChange in the AutoComplete component it breaks the filtering. I'm forced to use both of them because if you don't use onInputChange the state is not updated when the user write something and exit the textfield without pressing enter.

Expected Behavior 🤔

The list should get filtered while the user is typing more text.

Steps to Reproduce 🕹

Steps:

1. Use AutoComplete component
2. Add onChange and onInputChange on the component (both mapped to the same onChange function)
3. Try to enter some text in the textfield
4. Doesn't get filtered...

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.8.0
React	v16.12.0
Browser
TypeScript
etc.

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[PhilSchwerttraeger]

#18492 (comment)

[watkinshughes]

We are seeing the same issue in our implementation. Not sure how this is a support issue instead of a bug. Thanks.

[oliviertassinari]

@watkinshughes Without reproduction and working demos in the documentation, we assume it's a support request.

[atpollmann]

@oliviertassinari Here is a working demo using both handlers together
If I use onInputChange to update the value state, it autocomplete doesn't filter the list, and when pressing enter, it doesn't trigger the onChange handler.

You can remove onInputChange and everything works fine. The problem with this is that there's no way to update the state without pressing enter.

Thank you

[oliviertassinari]

@atpollmann You need to have two different states (value + inputValue).

[atpollmann]

@atpollmann You need to have two different states (value + inputValue).

Thank you @oliviertassinari, my mistake. It is clearly stated in the documentation

[zcemycl]

@Aerowiel I have a solution for this, instead of using filterOptions.

Instead of

const filterOptions = createFilterOptions({
  matchFrom: 'start',
  stringify: option => option.title,
});

<Autocomplete filterOptions={filterOptions} />

You can use filter in options

const [opts,setOpts] = useState({ip:''})
const keyIPs = ['a','aaa','ab','b']
<Autocomplete freeSolo 
value={opts.ip}
onChange={(event, value) => {
       console.log(value)
       setOpts(prev=>{return {...prev,
       ip:value?value:""}})}}
       inputValue={opts.ip}
onInputChange={(event, newInputValue) => {
        console.log(newInputValue)
        setOpts(prev=>{return {...prev,ip:newInputValue}})}}
options={keyIPs.filter((item)=>item.indexOf(opts.ip)===0)} 
getOptionLabel={(option) => option}
       renderInput={(params) => (
       <TextField  {...params} label="IP" margin="normal" variant="outlined"/> )}
 />