<h3 dir="auto">Problem description</h3>
<p dir="auto">If there is already an issue concerning this topic, feel free to close.</p>
<p dir="auto">When inserting text into the text input component, the IE11 and Edge show a (very large) reset X. Other browsers don't show the x. The size of the x is also not appropriate to the rest of the text(input). It just looks weird.</p>
<h3 dir="auto">IE 11</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2070820/23554706/85727254-0026-11e7-9ea0-adca73460caa.png"><img src="https://cloud.githubusercontent.com/assets/2070820/23554706/85727254-0026-11e7-9ea0-adca73460caa.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">Edge</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2070820/23554985/768a47de-0027-11e7-989d-f7ef69c46c26.png"><img src="https://cloud.githubusercontent.com/assets/2070820/23554985/768a47de-0027-11e7-989d-f7ef69c46c26.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">Link to minimally-working code that reproduces the issue</h3>
<p dir="auto"><a href="http://www.material-ui.com/#/components/text-field" rel="nofollow">http://www.material-ui.com/#/components/text-field</a></p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.17.0</li>
<li>React: 15.4.2</li>
<li>Browser: Internet Explorer 11</li>
<li>OS: Windows 10</li>
</ul>
<h3 dir="auto">Problem description</h3>
<p dir="auto">Single-line <code class="notranslate">TextField</code> components render a large 'X', floated to the right, on IE 11 when the field is focused and the code was built with <code class="notranslate">'process.env.NODE_ENV': JSON.stringify('production')</code>.</p>
<p dir="auto">In my project:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1571918/17904002/674b9094-6922-11e6-9623-2c5bb1ff373e.png"><img width="817" alt="x" src="https://cloud.githubusercontent.com/assets/1571918/17904002/674b9094-6922-11e6-9623-2c5bb1ff373e.png" style="max-width: 100%;"></a></p>
<p dir="auto">In the documentation site:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1571918/17904382/f639dbc0-6923-11e6-82ce-23dcae649e8d.png"><img width="385" alt="x_docs" src="https://cloud.githubusercontent.com/assets/1571918/17904382/f639dbc0-6923-11e6-82ce-23dcae649e8d.png" style="max-width: 100%;"></a></p>
### Steps to reproduce
<p dir="auto">In an IE 11 browser, go to <a href="http://www.material-ui.com/#/components/text-field" rel="nofollow">http://www.material-ui.com/#/components/text-field</a> and select the 3rd example (the one with text "Default Value").</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.15.4</li>
<li>React: 15.3.1</li>
<li>Browser: IE 11, Windows 8.1, in VMWare Fusion on OS X</li>
</ul>
<h3 dir="auto">Note</h3>
<p dir="auto">The 'X' is not present in builds with a <code class="notranslate">JSON.stringify('development')</code> value. It's also not present when setting the <code class="notranslate">multiLine</code> prop. It seems to only present in very specific situations.</p>
<p dir="auto">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.</p>