Autocomplete - Changing Input programatically

[ottogutierrez]

• 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 😯

I am changing the input of the Autocomplete programatically in the following way:

• I get a reference of the TextField component inside the Autocomplete
• I create a new Event for changing it's value with the following code:

  const input = inputRef.querySelector('input') // get the referece of the input
    var valueSetter = Object.getOwnPropertyDescriptor(input,'value').set  
    const prototype = Object.getPrototypeOf(input)
    const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype,'value').set
    if (valueSetter && valueSetter !== prototypeValueSetter) {
        prototypeValueSetter.call(input, lastComment.updatetype.toString());
    } else {
        valueSetter.call(input, lastComment.updatetype);
    }
    input.dispatchEvent(new Event('input',{bubbles:true})) // dispatch the event to trigger the onChange method

• After that code executes, the TextField will talk to an API to render possible entries for the Autocomplete. And this works fine, I see the TextField changing and the Autocomplete giving me the possible list of items from the API based on the TextField value
• However, when I select the option from the Autocomplete, the onInputChange method doesn't fire, and the selected option is never recorded

Expected Behavior 🤔

After selecting the option rendered on the Autocomplete, the onInputChange method has to trigger so the selected option can be saved to state

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.9.4
React	16.12.0

[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.

[oliviertassinari]

Prefer the React API over firing DOM events unless you are ready to dive into turbulent territories.

[oliviertassinari]

Tip: #18269 (comment).

[ottogutierrez]

Prefer the React API over firing DOM events unless you are ready to dive into turbulent territories.

You mean By setting the “value” property to a property in React and changing it that way? Will it fire the onChange method?

[oliviertassinari]

The onChange callback will fire if called properly.

[ottogutierrez]

I apologize but I want to get this clear. I am setting the value of the TextField (not autocomplete) via controlled inputs:
<TextField value={textFieldValue}..../> with textFieldValue using the React useState. However, it if I set this value somewhere else in the code, it does not trigger the onChange callback of the TextField.

I'm not sure if I'm missing something here

[oliviertassinari]

Do you have a reproduction?

[ottogutierrez]

Hi, yes, I created a sandbox recreating what I'm trying to do:

Codesandbox Example

I forked the code from the Material-UI site (Autocomplete component) and modified it to show you what I'm trying to do.

[ottogutierrez]

Hi,

Just an update to this. I keep trying to achieve this by trying to following the "Controlled component" idea using React API (Hooks for the Value and InputValue) and none of them worked as I expected.

What worked for me was the following:

1. Using a reference to the Autocomplete component (previously I was using a reference to the TextField component instead). Following React documentation on how to do it
2. Dispatching an Input event
3. Another issue, was that for some reason when my API got the exact same string, it filtered the items, but I couldn't select it from the list (even though it showed up in the autocomplete. So I ended up adding an extra space to the string so it would let me select the option from the items array

Thanks for your guidance!

[erfoon]

@ottogutierrez Doesn't inputValue/onInputChange help you?
I wanted to find a way to clear input onSelect when freeSolo and filterOptions are enabled and this tip solved my problem. For your case we should only put the desired string instead of ''.
The only remaining problem is when you set the inputValue, the suggestions will not pop up, but I believe there would be a way for that too.

[ottogutierrez]

@erfansamieyan, I get what you're saying but the issue is that onChange on the Textfield does not get triggered. You can see this example in this Codesandbox. This is how I finally solved my issue