Cannot type into the input in IE

[freeranger]

Opening your examples page in IE 11, I can't type into the input box at all.
The up/down arrows work as do the mouse up/down buttons but it will not accept keyboard input.

Also, with no styling on IE, it appears disabled - this is again from your examples page:

, which may or may not be related.

[vlad-ignatov]

I cannot reproduce this on IE 11 (nor on Edge). Are you still having this issue?

[freeranger]

It is better now in that I can type into it, though it appears disabled:

In Chrome:

Again, this is the first example on your demo page

[vlad-ignatov]

Are you sure it is not something external like a setting or plugin that causes it? Can you provide the outerHTML of the rendered input in your browser?

[freeranger]

Here you go, from IE 11.0.9600.18376

<fieldset>
                <legend class="text-success">Minimal Usage</legend>
                <p>
                    This will behave exactly like <code>&lt;input type="number"&gt;</code>.
                    It will create an empty numeric input that starts changing from zero.
                    The difference is that this works on any browser and does have the same
                    appearance everywhere.
                </p>
                <blockquote>
                    <div class="code jsx hljs apache"><span class="hljs-tag">&lt;NumericInput/&gt;</span></div>
                    <div><span class="react-numeric-input" style="display: inline-block; position: relative;" data-reactroot=""><input style="border-radius: 2px; border: 1px solid rgb(204, 204, 204); border-image: none; line-height: normal; padding-right: 3ex; padding-left: 4px; display: block; box-sizing: border-box;" type="text" pattern=".*" value=""><b style="background: rgba(0, 0, 0, 0.1); border-width: 1px 1px 0px; border-style: solid; border-color: rgba(0, 0, 0, 0.1); border-radius: 2px 2px 0px 0px; transition:0.1s; top: 2px; width: 2.26ex; text-align: center; right: 2px; bottom: 50%; position: absolute; cursor: default; box-shadow: inset -1px -1px 3px rgba(0,0,0,0.1), inset 1px 1px 3px rgba(255,255,255,0.7);"><i style="border-width: 0px 0.6ex 0.6ex; border-style: solid; border-color: transparent transparent rgba(0, 0, 0, 0.7); margin: -0.3ex 0px 0px -0.56ex; left: 50%; top: 50%; width: 0px; height: 0px; position: absolute;"></i></b><b style="background: rgba(0, 0, 0, 0.1); border-width: 0px 1px 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.1); border-radius: 0px 0px 2px 2px; transition:0.1s; top: 50%; width: 2.26ex; text-align: center; right: 2px; bottom: 2px; position: absolute; cursor: default; box-shadow: inset -1px -1px 3px rgba(0,0,0,0.1), inset 1px 1px 3px rgba(255,255,255,0.7);"><i style="border-width: 0.6ex 0.6ex 0px; border-style: solid; border-color: rgba(0, 0, 0, 0.7) transparent transparent; margin: -0.3ex 0px 0px -0.56ex; left: 50%; top: 50%; width: 0px; height: 0px; position: absolute;"></i></b></span></div>
                </blockquote>
</fieldset>

There are no errors in the console and I don't have any plugins.

[vlad-ignatov]

Unfortunately I'll give up for now. The html shows that that there is no CSS background or readonly or disabled and there is no reason for the input to be grey. Also, I can't reproduce it on multiple versions of IE.

I tried to change a few of the advanced settings in IE and nothing changes. Maybe it depends on the OS type and version and even on the installed updates...

The only thing that I can think of now is that your version of IE has some wrong or buggy implementation of the pattern attribute and is trying to express something by rendering the input in grey. Maybe you can use the last example to try and see if that is the case? The question is is there any difference (grey or white bg) between these two:

<input  type="text" pattern=".*" value=""/>

and

<input  type="text" value=""/>

[freeranger]

Interestingly I tried on IE on a VM (windows 10) and it was fine.
Also in the problem environment (corporate), whilst the minimal usage example appears disabled, the "With ClassName" and "with inline styles disabled" version both appear fine...

[piersolenski]

I can type into the input, but can't seem to move to another field once I've finished typing - the cursor seems to get stuck.

[Saniol]

I found solution for issue described by superfunkminister, see pull request #25

[vlad-ignatov]

#25 is now merged and I hope the latest version (2.0.7) fixes your issue

[piersolenski]

Working for my use case!

[stahlmanDesign]

I noticed in IE11 the numeric keypad input doesn't work but row numbers do (running IE in a VM).

[vlad-ignatov]

I am closing this issue because it is too old and probably fixed. Feel free to reopen it if needed.