Steps to reproduce:

1. Visit demo page.
2. Interact with Standard integer with formatting field as follows:
   1. Unfocus the field.
   2. Observe the value is 1,500,000.
   3. Click between the comma and the hundreds place.
   4. Observe that when the input field switches to edit mode, the cursor blinks between the hundreds and tens place.

On same page and Standard integer with formatting field:

1. Unfocus the field.
2. Observe the value is 1,500,000.
3. Attempt to select/highlight 500 by click-dragging the mouse.
4. Observe that the selection highlight in the focused field (edit mode) starts after the 5.

Possible Solution

Not sure how to fix this. Maybe this way?

When user clicks on formatted field,
determine location of cursor in formatted value,
map location of cursor to unformatted value.  something like...

    1 , 5 0 0 , 0 0 0       formatted value
   │ └─┤ │ │ ├─┘ │ │ │
   └─┐ │ │ │ │ ┌─┘ │ │
     │ │ │ │ │ │ ┌─┘ │
     │ │ │ │ │ │ │ ┌─┘
      1 5 0 0 0 0 0         unformatted value (edit mode)

each side of a comma would map to the same edit-mode cursor location.

And something similar with the selection issue, though I imagine if the cursor starts at the correct position in edit mode kicks in, then dragging the selection highlight would Just Work™ without further effort.

The experience of having the text switch between unformatted and formatted as you focus and blur isn't expected by most users.

I'm using Safari Version 8.0.8 (10600.8.9). Seems this is just a Safari issue, however, was hoping this component was able to fix it somehow.

This is for all 1.x versions;

Getting the following error:

bind(): React component methods may only be bound to the component instance. See exports

This is how I'm using the component:

<NumberInput
    className = { styles.NumberInput }
    max = { 999 }
    min = { 1 }
    onChange = { this.onAppCountChange }
    type = 'number'
    value = { this.state.subscriptions.renewalCount }
/>

… and the onChange function:

onAppCountChange(event) {
    var value = event.target.value
    var currentAppCount = this.state.subscriptions.appAccountTitles.length
    SubscriptionActions.updateAppRenewalCount(value)
    this.setState({
        errorMessage: value < currentAppCount ? 'You currently have ' + currentAppCount + ' active ' + _('app').pluralize(currentAppCount) + '. Tktk remove some' : null
    })
}

Any idea where this error is coming from?

NumberInput seems to disregard "autoFocus" prop. I was previously using refs to manage focus, but ran into issues when I started using react-dnd (drag and drop). Also, using refs is frowned upon in React.

Any chance that you can add autoFocus support?

Any reason peer dependency doesn't allow react@16?

Use webpack to packaged the component. I have a pull request that does just that.

If value is null, we get a proptypes error - null is surely an acceptable case for values?

This will make #12 easier to deal with. See comments by @dwendo and the new numbro.js project.

Hello,

Thanks for doing this -- when it works, it's fantastic, and a major time-saver.

However, I'm getting this problem when I've installed this in a React 15 application.

Looking here it appears that this happens when you get more than one instance of React installed in your application. Someone in that thread found out that some code they npm installd had its own copy of React.

I checked, and sure enough, I found node_modules/react-number-input/node_modules/react. I removed that directory and the problem went away.

Thanks!

It would be convenient if the format prop could be a function instead of a string, so that using the numbro formatting strings wouldn't be mandatory. The format() function could be called instead of numbro.format() inside of the internal toFormattedString() method when it's a function, otherwise it could just function the same way that it does now.

Need to fix dependencies for react :

• Set react and react-dom as devDependencies instead of dependencies
• Set react and react-dom as peerDependencies
• Add react v16 compatibility

Could you make a release with the changes merged from #36?

I noticed min/max are not working. In fact, I checked code and I found no usage of min/max props? What?

In read.me, Default format is 0,0[.][00]

<NumberInput
	id="price"
	type="tel"                      // optional, input[type]. Defaults to "tel" to allow non numeric characters
	onChange={this.onPriceChange}   // function (value: number | null, event: Event)
	value={this.state.price}        // normal react input binding
	placeholder="Enter price"       // all other input properties are supported
	min={0}                         // optional, set minimum allowed value
	max={100}                       // optional, set maximum allowed value
	format="0,0[.]00"               // optional, numbro.js format string. Defaults to "0,0[.][00]"
/>

But in source, Default format is 0,0.

refs: https://github.com/hongymagic/react-number-input/blob/master/index.js#L15

Which one is default format?

If 0,0[.][00] is correct default format, I'll fix default format and send P.R.

The defaults of numeral are not useful, and there is currently no way to set numeral.language

E.g.

var french = {
    delimiters: {
        thousands: ' ',
        decimal: ','
    },
        ...
    };

<NumberInput
                numeralLang={french} ...

To avoid this issue https://gist.github.com/jimfb/4faa6cbfb1ef476bd105 react-number-input needs to be updated to react 15.0.1

Since 1.5.4

After I input 0, the action logger shows null

Then I click the outside of the input, the 0 disappers