sanniassin / react-input-mask Goto Github PK

This block in componentDidMount is not allowing Jest to run to completion.

if (Object.getOwnPropertyDescriptor && Object.getPrototypeOf && Object.defineProperty) {
    var input = this.getInputDOMNode();
    var valueDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
    this.canUseAccessors = !!(valueDescriptor && valueDescriptor.get && valueDescriptor.set);
}

If maskChar !== "" => value + 1 symbol

Screenshot:

Can be seen happening here: http://g.recordit.co/YQDzqaGKiu.gif

Stateless function components cannot be given refs (See ref "input" in a component created by InputElement). Attempts to access this ref will fail.

As React has deprecated ref from stateless components, and usage of such throws warnings now, could this be dropped?

When I attempt to run npm run build or npm install runs with postinstall build, there is an error about browserstack credentials and falling back to PhantomJS, but then just get a huge slow of errors:

➜  react-input-mask git:(master) npm install

> [email protected] prepublish /Users/rosenbek/Desktop/git/react-input-mask
> npm test && npm run build


> [email protected] test /Users/rosenbek/Desktop/git/react-input-mask
> npm run test:karma && npm run test:mocha


> [email protected] test:karma /Users/rosenbek/Desktop/git/react-input-mask
> karma start

Can't load credentials from browserStack.json, fallback to PhantomJS
23 05 2016 16:13:04.134:WARN [watcher]: Pattern "/Users/rosenbek/Desktop/git/react-input-mask/node_modules/babel-core/browser-polyfill.min.js" does not match any file.
23 05 2016 16:13:07.421:INFO [framework.browserify]: bundle built
23 05 2016 16:13:07.427:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
23 05 2016 16:13:07.431:INFO [launcher]: Starting browser PhantomJS
23 05 2016 16:13:07.896:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#ClJlnKL_EQAPLTJsAAAA with id 17470414
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Init format FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Format unacceptable string FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Focus/blur FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input alwaysShowMask FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Focus cursor position FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input onChange input FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input onChange input without mask FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Characters input FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Characters input without maskChar FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Backspace single character FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Backspace single character without maskChar FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Backspace single character cursor position FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Backspace range FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Backspace range cursor position FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Delete single character FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Delete single character cursor position FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Delete range FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Mask change FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Paste string FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Paste string without maskChar FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Paste string with maskChar at place of permanent char FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0) Input Custom rules FAILED
    ReferenceError: Can't find variable: setImmediate in /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify (line 20319)
    /var/folders/z9/319t___d3jz24yjt79lb8kn5x4c579/T/36cccaeab54b3251c43b101bd62a8436.browserify:20319:21
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 22 of 22 (22 FAILED) ERROR (0.008 secs / 0.04 secs)

npm ERR! Darwin 14.5.0
npm ERR! argv "/Users/rosenbek/.nvm/versions/v4.2.5/bin/node" "/Users/rosenbek/.nvm/versions/v4.2.5/bin/npm" "run" "test:karma"
npm ERR! node v4.2.5
npm ERR! npm  v2.14.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] test:karma: `karma start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test:karma script 'karma start'.
npm ERR! This is most likely a problem with the react-input-mask package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     karma start
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-input-mask
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/rosenbek/Desktop/git/react-input-mask/npm-debug.log
npm ERR! Test failed.  See above for more details.

npm ERR! Darwin 14.5.0
npm ERR! argv "/Users/rosenbek/.nvm/versions/v4.2.5/bin/node" "/Users/rosenbek/.nvm/versions/v4.2.5/bin/npm" "install"
npm ERR! node v4.2.5
npm ERR! npm  v2.14.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] prepublish: `npm test && npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] prepublish script 'npm test && npm run build'.
npm ERR! This is most likely a problem with the react-input-mask package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm test && npm run build
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-input-mask
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/rosenbek/Desktop/git/react-input-mask/npm-debug.log

When using this component, my inputs have always the same length. For example, if I mask a DOB input and do 99/99/9999 - and then do dob.length the result will be 10 even when the input is empty. Is this the intended behavior?
It would work best for me if this didn't happen.

Does there any ways to get unmasked input value? For example, with mask +7 (999) 999-99-99 in onChange event value of event.target.value variable is +7 (111) 123-12-12. Could I get just 1111231212?

I had to remove the library as it was not compatible with IE 11. :-(

add support for the readOnly attribute on an element so that the user cannot modify the content when the property is set

render: function() {
        var { mask, alwaysShowMask, maskChar, formatChars, ...props } = this.props;
        if (this.mask && props.readOnly !== true) {
            var handlersKeys = ["onFocus", "onBlur", "onChange", "onKeyDown", "onKeyPress", "onPaste"];

Currently mask string has options for numeric and/or alphabets and not special characters. What if, for no particular pattern, one needs to allow 1 or more special characters to the input.
For example, an underscore (_) : (hello_world)

var ua = navigator.userAgent;
              ^
ReferenceError: navigator is not defined

Will be better to test browser specification in componentWillMount?

There is a way to use a optional char?

Example:
<MaskInput mask="(99) 9999-9999[9]" />
or
<MaskInput mask="(99) 9999-9999{9}" />
or
<MaskInput mask="(99) 9999-99999?" />

Thanks!

masked input doesn't work in Safari because of event.key undefined

Hi,

This component does not work as aspected on Android (Chrome on Galaxy S6 and Nexus 5). If I enter a character, the character will be added but then the input cursor will jump to the start of the input. So if I type a seccond character it will be placed in front of the first character.

I use the component with the following settings:
mask: **** **** **** ****
maskchar: null

how can i use this on rails?

For example, we have a date mask 99/99/9999

User enters 01.
What should he enter next: digit or slash(/)? It's non-obvious and user can only guess and learn this behavior(which is not good UX).

It would be much better, if the plugin added next char automatically, if it's a mask char.

So in our case, when user types 01 he'd see 01/.

I've already fixed it in my project and can submit a PR. Is this something you'd consider merging in?

Hi, I'm not sure how welcoming you will be toward change like that, but I'm trying to use react-input-mask in a ClojureScript project and because of that I'm using Google Closure Compiler.

Which complains that char is a reserved keyword. What do you think about changing that name to a different one? :)

If I use a mask like this:

<InputElement mask="999.999,99 kr." [...] />

The trailing " kr." is omitted.

Hello guys

If I use the following code

<InputMask
  type="text"
  mask="999 €"
  maskChar=""
  alwaysShowMask={true}
  value={10}
/>

I expect to see an input with "10 €" display in it
instead I have "10"

I have the impression all the mask on the right is omitted

It was working fine with React 0.14.7, though it throws warning with React 15.1.0 when trying to change mask of the InputElement.
Code to reproduce:
<InputElement id="myid" className="myclass" name="myname" type="text" mask={this.state.mask} maskChar="_" />

Warning message:
InputElement is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Currently I'm trying to update my react version to 15.0.2 but blocked my this lib(now the peerDependency is react >=0.12).
Do we have a plan to support the newest version?

Try to run your examples http://sanniassin.github.io/react-input-mask/demo.html on Android devices.
They are all broken...

It would be ideal if there were 2 different props value and defaultValue to handle both cases controlled and uncontrolled default value.

When you mask using '9999 9999 9999 9999' and use a maskChar of null, everything works as expected if you in put 4242 4242 4242 4242. Now, select all and paste a 15 digit number instead (as is the case with an Amex card) and the remaining 2 is left with the number.

Expected result is that the original number would be completely removed and only the new, 15 digit number would be present.

It would be nice to have a reverse option, that would make the mask be applied right to left.
So one could use a mask for money, for example, '999,999,999.99' and it would work no matter the amount of digits.

Following input: <MaskedInput mask="+1 (999) 999-9999" onChange={this.setValue}>
This works fine for all browsers but Android browser:
Instead +1 (440) 494-6237 value is set to: +1 (440) 494-6237_

Hi, I noticed that input highlights text from current cursor position to the end on each keyDown, it doesn't bother me when typing but makes it impossible to use backspace. I didn't have this problem on version 0.5.2

Hello,
I know there was an issue open similar to this and is now closed but I wanted to show the use case for this. I'm testing on a mobile device (in this case in the iOS simulator) and my mask is for a credit card set to '9999 9999 9999 9999'. I'm setting the type to number because I want the numbers to be visible on the iOS keyboard when I go to input the credit card number. Here is a short video of the behavior:

http://screencast.com/t/cajgTxrzP

Also worth noting if I remove the spaces from my mask it works as expected. If I replaced the spaces with dashes it doesn't work either.

If I change the type to tel everything works as expected and yes, that does bring up a number only keyboard, but for some reason it feels weird to me that I should have to do that.

Thoughts?

It would be nice to have some tags in repository so it'll be possible to download exactly version 0.5.10 without resorting to referring to a commit hash.

Like https://github.com/sanniassin/react-input-mask/blob/0.5.10/InputElement.js

I wrote a pullRequest for this issue: #63 , could you check if this is a good way and if possible to merge it?

thx

The exceptions is: ReferenceError: navigator is not defined ... at node_modules/react-input-mask/build/InputElement.js:23:18

var newState = {
nask: "9999-9999-9999-9999",
value: value

There's a way to set state.value as empty depending on another state? I have a form and after it has been sent, I need to clean all input fields.

I'm currently doing it like this:

<InputElement type='tel' ref='cellphone' required styleName='form-info__cel' placeholder='Celular*' mask='(99) 99999-9999' onBlur={(event) => {
this.validateCellphone(event.target.value.replace(/[^\d]+/g, ''))
}} />

[...]

this.refs.cellphone.state.value = ''

but this raises an error on browser console:

Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

is there another way?

If you have a React component like:

import InputElement from 'react-input-mask';

//...
render() {
        return (<InputElement
          ref='fieldInput'
        />);
}

And then try to reference this.refs.fieldInput, it will not be defined. If you take the exact same code and turn it into a plain old input, it will work:

//...
render() {
        return (<input
          ref='fieldInput'
        />);
}

Is this by design?

Trying to use this lib with react v0.14.0-beta2 getting this error in console:
Warning: InputElement.getDOMNode(...) is deprecated. Please use React.findDOMNode(instance) instead.

Stacktrace is

warning @   warning.js:45
ReactBrowserComponentMixin.getDOMNode   @   ReactBrowserComponentMixin.js:30
setCaretPos @   InputElement.js:223
setCaretToEnd   @   InputElement.js:164
.....

Could you, please, fix it?

Any getRaw() method available?

Hello and thank you for this fantastic component. I'm running into an issue where I copy paste a CC number and I see an error in the console. My mask settings are:

mask="9999 9999 9999 9999"
maskChar={null}

If you copy paste the following:

4242 4242 4242 4242

you will see the issue in the console:

InputElement.js:517 Uncaught ReferenceError: i is not defined

Please let me know what I can do to help on this and if you need me to build an example out.

Again, thanks for the wonderful class. It's just about the only input masking utility I've found that acts as I fully expect it to. It actually ended up being the reason why I implemented Babel and React in our code base just yesterday. It was the perfect excuse to start using them and now we're off to the races :)

I set mask "99.99.9999" and only first digit is allowed.

The component throws a warning with latest React 15.2.0:
warning.js?dc8b:44 Warning: Unknown prop maskChar on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

Hi,

Is it possible to have different characters for the mask in one input?

For example dd/mm/yyyy instead of__//__.

Why is onChange being called when focusing the input? I understand that there are some cases where it is needed but if the value is not changed then maybe we shouldn't call the onChange event?

Also. we need to store the clean value of the input without the added characters of the mask for obvious reasons and we were surprised to see that this library doesn't store a clean input value that we can just access through the change event.

I believe the following line throws an error if an input has autoFocus set to true. f2997b3#diff-444a3d04aeca567b0492915f6ad4ee82R698

When the component loads, autoFocus makes it so that onFocus is called. This calls getInputValue, which breaks because this.refs.input is null.

Let me know if you want any more info!

for example with http://material-ui.com/#/components/text-fields ?

I was attempting to use this to input mask an email address, but it doesn't seem like such a thing would be possible with this library.

For example, I would think something like:

mask="*@*.a"

Should be able to support [email protected] or even [email protected], etc. Is there not a way to support variable lengths of characters while input-masking? Maybe some syntax like:

mask="*...@*...\.a..."

would make sense?

Even when no mask is desired, the mask property is required when setting a default value.

I found a workaround by defaulting mask to an empty string when no mask is provided.

Is this a known requirement?

P.S. the following error results when passing a default value with no mask prop...

InputElement.js:136 Uncaught TypeError: Cannot read property 'length' of null

I have an issue with the component. When using it with a standard desktop web browser i don't have this issue. But on Android when the last character is entered (from the limit) the caret moves back 1 space.

You can see it I made a screen capture on my phone.

https://www.dropbox.com/s/2o2ltd35uca165b/2016_07_29_22_40_38_22_50_29_22_51_58_22_54_21_22_54_59.gif?dl=0

Hi,

We are using react-input-mask in a webapp and it's worked great so far. But we've recently realized that the mask is causing problems on Windows phones (which we do have to support, unfortunately).

Steps to reproduce:

1. Get a Windows 10 Phone with the Edge Browser (we are testing on a Lumia 950, Microsoft Edge 25.10586.107.0)
2. Go to the demo page: http://sanniassin.github.io/react-input-mask/demo.html
3. Try to type in any of the examples.
4. For every character you type, it shows up twice:

Example: I type 1 into the input element. It actually shows 11.

We do not really understand why this is happening, but know that if we disable the onKeyPress event handler inside InputElement, the bug stops happening (when mask character is undefined).

We are hoping you can fix this so we don't have to fork and just put in our bad hack :(

Thank you!

Is that possible?
In react that possible as:
this.setState({'value':''});
How to do it for InputElement?

Thanks.

P.S Reset form not work for InputElement.

Browser: Chrome 47

When I'm working with input[type="number"], I got the following error messages in my console:

Uncaught InvalidStateError: Failed to set the 'selectionStart' property on 'HTMLInputElement': The input element's type ('number') does not support selection.

I know that input[type="number"] does not support the "selectionStart" property and I've noticed that we've handled it in the code:

if ("selectionStart" in input && "selectionEnd" in input) {
            input.selectionStart = start;
            input.selectionEnd = end;
} else {
//...
}

but currently in Chrome , it's not enough because "selectionStart" in input will return true even the input is number field. and when we try to visit the "selectionStart" property, we'll get an error;

Hello. Can you update react peer dependency to "react": "^0.14.0 || ^15.0.0-0"?