[TextField] On IE, the browser-specific X to clear the text field's contents does not trigger onChange events.

[lawrence-yu]

Problem description

On Internet Explorer, a black X shown on the right end of a TextField component if there is some text present. Clicking on this X is supposed to clear the contents of the text field.

On a controlled TextField component, clicking on this X does not fire an onChange event. The text will disappear after clicking it, but clicking elsewhere causes the old value to reappear.

For uncontrolled TextField components, the component behaves normally.

Steps to reproduce

1. Using Internet Explorer
2. Go to http://www.material-ui.com/#/components/text-field
3. Go to the Controlled Example.
4. Type some text in the TextField.
5. With the focus in the TextField, a black X should be available. Click on it.
6. Observe that the text disappears.
7. Click outside of the TextField.
8. Observe that the previous text reappears.

Versions

• Material-UI: ^15.0.0
• React: ^15.0.0
• Browser: Internet Explorer

[oliviertassinari]

Are you also able to reproduce this issue with a raw <input />?

[lawrence-yu]

Initially, no. Using the same code as the Controlled Example but with a raw <input />, I was not able to reproduce the behavior. http://codepen.io/lawrenceyu/pen/dXaLoZ

However, I noticed that the component was not being re-rendered when clicking the X and then clicking outside of the <input />

I then added isFocused to the state, as well as onFocus and onBlur handlers onto the <input /> (mimicking part of the TextField implementation), and this component reproduced the original behavior. The controlled value does not change when the X is clicked (because the onChange event is not fired), and now the component re-renders because of the change of the isFocused state, rendering the old value. http://codepen.io/lawrenceyu/pen/xOrZdY

[oliviertassinari]

Sounds like an issue with React itself: facebook/react#6822.

[codylawson]

Would it be worthwhile to hide the clear button on inputs altogether until this is resolved? Something similar to:

input[type="text"]::-ms-clear {
  display: none;
}

There's also an issue where the clear button takes up the full height of the input, this is a problem on inputs with a floating text label.

Would we want to adjust the height to 1em to make it more consistent across inputs?

[oliviertassinari]

@codeheroics Have a look at #5055.

[codylawson]

Ack, should have been more thorough in my search. Thanks @oliviertassinari

[oliviertassinari]

The issue was fixed by React facebook/react#8575. We can close :).