Search code examples
reactjsautocompletematerial-uitextfielddisabled-input

Disable a textfield based on a autocomplete value React js - Material Ui

I have 2 fields. The first one it's an autocomplete. The second one is a textfield. My second field is disabled by default. I want to change it from disabled to enabled every time The user types and choose one option of my autocomplete.

I've tried with using useState hook and onChange to set and update the state of the field.This does not work though.

I've tried getting the input value with a ref in my autocomplete like the following:

inputRef={ref => { this.inputRef = ref; }}

And then appling it to the textfield.

Nothing has worked.

Note: my autocomplete is wrapped in a controller.

Help

Solution

  • I made a CodeSandbox trying to fix your problem - if I understood it correctly.

    Try it and see if it makes sense:

    https://codesandbox.io/s/frosty-wildflower-ckjnd?file=/src/App.js