TextField.js Bug: `value` attribute missing from Tag

Topic: TextField.js Bug: `value` attribute missing from Tag

jkilbride asked 7 years ago

In the TextField.js component, the value attribute is missing from the Tag in the render method:

<Tag
 {...attributes}
 id={id}
 className={classes}
 ref={el => { this.inputElRef = el; }}
 placeholder={hint}
 onBlur={this.onBlur}
 onChange={this.onChange}
 onFocus={this.onFocus}
 />

It is NOT included in the {...attributes}spread operator. Therefore, the value of the text control is never updated when setState is called. For updates to work, the Tag should be changed to this:

<Tag
 {...attributes}
 id={id}
 className={classes}
 ref={el => { this.inputElRef = el; }}
 placeholder={hint}
 value={this.state.innerValue}     <---- Add value attribute to control
 onBlur={this.onBlur}
 onChange={this.onChange}
 onFocus={this.onFocus}
 />

I have tested this locally by copying the source for the Input and TextField components into my project and making this change. Without the change, setState does not work. With the change, it does.

Add comment

Jakub Strebeyko staff answered 7 years ago