Typescript React Textfield does not change value on Dropdown change

Question

I have a Dropdown Field with options and a Textfield which should be used to store user input in an object array with key value pairs. This happens in the onchange event of textfield. Additionally the textfield should retrieve the data out of the array and show the value on change of the dropdown in the same textfield.

I am not sure if this is possible, I only tried to set the "defaultValue" attribute of the textfield dynamically.

The part with saving userinput in the object array works fine. But the value in the textfield doesnt change on onchange of dropdown. I get the selected value and therefore also the value out of the array while debugging.

I have also a problem with setting the initial value of dropdown element. I dont want it to be blank on init, instead it should have one of the values out of the optionset which I provide.

Dropdown: Where I set selectedValue

<Dropdown

    defaultValue={this.options["foo"]}  //<-- This doesnt work too
    id="Dropdown"
    options={this.options}
    onChange={(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
       this.setState({
                        selectValue : option?.text
                     }, this.onNameChanged);
                     }
             }
 />

Textfield:

<TextField
 id="inputVarLang"
 defaultValue={this.state.arrayObj[this.state.selectValue as any]}
 placeholder={"---"}
 onChange={(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>, 
 newValue?: string): void => {
                         this.setState({
                                   arrayObj: update(this.state.arrayObj 
                                   {[this.state.selectValue as any]: {$set: newValue ?? ""}})
                                        }, this.onNameChanged);
                             }
           }/>

It would be great if someone could help me with this.

Whitch library do you use for Dropdown component (not material ui) ? — Lahcen
– Lahcen, Commented Dec 26, 2021 at 18:59
to initialize the dropdown, you need to use "defaultSelectedKeys" prop. see example here fabricweb.z5.web.core.windows.net/oufr/6.111.2/#/examples/… — Lahcen
– Lahcen, Commented Dec 26, 2021 at 19:38

Lahcen · Accepted Answer · 2021-12-26 18:52:21Z

1

You need to use "value" prop of TextField instead of defaultValue, like this

<TextField
 id="inputVarLang"
 value={this.state.arrayObj[this.state.selectValue as any]}
 placeholder={"---"}
 onChange={(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>, 
 newValue?: string): void => {
                         this.setState({
                                   arrayObj: update(this.state.arrayObj 
                                   {[this.state.selectValue as any]: {$set: newValue ?? ""}})
                                        }, this.onNameChanged);
                             }
           }/>

answered Dec 26, 2021 at 18:52

Lahcen

1,45312 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hamido Over a year ago

Oh my god, thank you. It was that simple and I was trying to solve this like hell. I thought, I can't use "value" instead of "defaultValue" because this makes the textfield readonly. But its not the case. Thank you again.

Collectives™ on Stack Overflow

Typescript React Textfield does not change value on Dropdown change

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related