Material-ui: [TextField] Large 'X' shown in IE 11 on production builds

[petermikitsh]

Problem description

Single-line TextField components render a large 'X', floated to the right, on IE 11 when the field is focused and the code was built with 'process.env.NODE_ENV': JSON.stringify('production').

In my project:

In the documentation site:

Steps to reproduce

In an IE 11 browser, go to http://www.material-ui.com/#/components/text-field and select the 3rd example (the one with text "Default Value").

Versions

• Material-UI: 0.15.4
• React: 15.3.1
• Browser: IE 11, Windows 8.1, in VMWare Fusion on OS X
  

  Note

The 'X' is not present in builds with a JSON.stringify('development') value. It's also not present when setting the multiLine prop. It seems to only present in very specific situations.

I'm not sure if IE 11 is officially supported by material-ui. In the case it's not, I would still find it valuable to have a discussion of how those of us who wish to support it can monkey-patch our own builds.

[petermikitsh]

Ah, this probably has something to do with the ::ms-clear pseudo element.

Applies one or more styles to the clear button of a text input control. The clear button is shown only when the text input control has focus and is not empty.

https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx
https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear

And a possible solution:

.someinput::-ms-clear { display: none; }

http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs

[oliviertassinari]

We have two related issues #4928 and #4906.

I'm wondering if we should remove it. That clear button seems something users are expecting on this browser. Could we make it less ugly?

[petermikitsh]

Adding the following to my react tree hid the ::ms-clear pseudo element:

<style type='text/css' dangerouslySetInnerHTML={{__html: '::-ms-clear {display: none;}'}} />

I think there is a solid argument for hiding ::ms-clear by default.

• Given the side effect mentioned in #4928, it would seem wise to hide it. If onChange isn't going to fire, then it's doing more harm than good, as it is mis-representing application state to the user. I could imagine situations such as users clicking the 'X' and reasonably assuming the value is empty, and at some point in the future, being confused when the application state does not line up with their mental model of the data. That's the biggest concern-- degraded usability (even if it is due to an issue in react core, beyond the scope of this repository).
• In terms of the material design specification, there is no concept of ::ms-clear, so it should not be there.
• From an architectural perspective, it's reasonable to expect material-ui components to look and function with the highest level of parity across all browsers. Minimally, that might be the expectation of the consumers of this module.

Conversely, it would be absolutely possible to style it. I doubt the spec has any opinion in this situation, however.

[umidbekkarimov]

Good point @petermikitsh
But there is concept of clearing search value of autocomplete. But it should be for all browsers.

I'm wondering if we should remove it. That clear button seems something users are expecting on this browser. Could we make it less ugly?

@oliviertassinari just inject ::-ms-clear {display: none;} style, like in EnhancedButton, but it will not help with server side rendering

Better solution will come as soon as jss will be implemented

[oliviertassinari]

Technical speaking

like in EnhancedButton

@umidbekkarimov There is an issue with the EnhancedButton approach. It's breaking encapsulation. We would need to add a specific class name.

but it will not help with server-side rendering

That's basically an issue with the current inline style approach. That's fixed on the next branch.

Visually speaking

@petermikitsh You have some good points.
What do you think about what material design lite is doing?

@callemall/material-ui Any light here 💡?

[petermikitsh]

@oliviertassinari If the X is a little smaller, vertically centered, not #000, (all of which MDL has done) and functions correctly I think it's acceptable being present by default.

[oliviertassinari]

Here is what we have on the next branch. The color is based on the input color.
I think that we can close this issue as it looks much better:

I hope that https://github.com/facebook/react/issues/6822 is solved by the time we release next.

[NathanQ]

Sorry, I'm confused about the resolution and unsure what next refers to. React? Issue seen in react 15.5.4 with material-ui 0.17.4. Updated material-ui to 0.18.6 and issue persists. Thanks!

[oliviertassinari]

next refers to the v1-alpha branch. You can find it on npm under the @next tag.

[christophrus]

@oliviertassinari So was this completely removed at some point? Really missing this feature.

[oliviertassinari]

@christophrus It was never added nor removed. It's a browser feature (<input type="search" />).

[JobiLaszlo]

Try to play with size:

<input type="text" name="email" size="35">