vlad-ignatov / react-numeric-input Goto Github PK

This warning when using react-numeric-input 2.0.4 in react 15.2.1 does not seem to break anything but it is annoying:

Warning: Unknown props `mobile`, `onSelectStart` on <input> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in input (created by NumericInput)
    in span (created by NumericInput)
    in NumericInput (created by NumberControl)
    ...

It would be great to be able to override the inline styling with a disableStyles prop or by allowing the style prop to be an object or boolean false. We are using the component, and our team does styling from separate less files, which meant throwing !important on everything.

Happy to make a PR for it for either implementation!

When debugging I noticed there is a parsed numeric value stored in the input state, would it be possible to pass such data in to the parse callback?

The component uses <input type="text" > as the underlying input control. While this works fine on the desktop, on a phone, normally I would like the numeric keypad to appear whenever the control has focus.

Having <input type="text"> makes it very annoying to enter a number using this component as one has to switch input method first.

So the question is, why not use <input type="number"> as the underlying input control? And whether I can override the default input type?

In the documentation, demo, and tests I could not find any reference to how to extract the numeric value of the input through the use of the apparent _valueAsNumber

<NumericInput ref="myNumericInput"/>

this.refs.myNumericInput._valueAsNumber
>>undefined
this.refs.myNumericInput.valueAsNumber
>>undefined
this.refs.myNumericInput.refs.input.valueAsNumber
>>NaN
this.refs.myNumericInput.refs.input._valueAsNumber
>>undefined
this.refs.myNumericInput.refs.input.value
>>"5.00"

Can you please indicate how to use the _valueAsNumber property ?

Hi, there's any way to make the plugin behaves a little bit more like the type=number on mobile opening the numeric keyboard by default? When you start to edit a type=number field on mobile the numeric keyboard opens by default and it helps a lot on the form usability.

Thanks for your attention.

When adding event handlers to numeric input components in React 15.0.1, I get the following warning in the javascript console:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property type on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.

import NumericInput from 'react-numeric-input';

[...]\node_modules\react-numeric-input\src\NumericInput.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { PropTypes, Component } from 'react';
|
| const KEYCODE_UP   = 38;

I'm using webpack 1.12.11 with babel 6.4.0 and react 0.14.6. In my app ES6 imports work correctly so all necessary presets are included - just this module doesn't work. It's probably connected with #1

Hey @vlad-ignatov using react-numeric-input control has helped me a lot and serving my purpose. Now its time for some unit testing react-numeric-input with my project..

Some how the test cases you provided taking them as reference i can't simulate key-up/down/change events. Is their any best way to do it or am i making wrong direction. Following is the code.

`it('calls onChange when user press up arrow key', () => {
let onChangeCalls = 0
function onChange(x){
console.log('change function fired');
onChangeCalls += 1;
}

   var widget = TestUtils.renderIntoDocument(<MyNumericInput
                onChange={ onChange }
   />             
   )

   TestUtils.Simulate.keyDown(widget.refs.numericbox, {
        keyCode: KEYCODE_UP,
        ctrlKey: true
    })
   console.log(onChangeCalls); 
   expect(onChangeCalls).to.equal(1);
});`

Whereas MyNumericInput is my component wrapping react-numeric-input control inside it.

Let me know if you need more information on this..

npm install react-number-nput --save - should be react-numeric-input

Hello,

I am not an expert but in Chrome it seems that it doesn't work on Chrome.
On my computer it shows + and - signs on the left and right of the input box instead of the spin up and down.
Anyone is having the same issue?
works fine with Edge and firefox.

Thanks

Was curious to know if IE10 was meant to be supported? Validated using the demo site that an error gets thrown on line 153 with error "Invalid operand to 'in': Object expected"

They are able to test some complex event driven sequences much better.

If you add a format function that returns a string it breaks the user being able to type in numbers. It only allows you to type in one digit and the value can disappear. The cursor seems to move to the end.

You can see the in the Buy Parts section of this page for instance.

Here is a video: https://kaspar.h1x.com/numeric-input-bug1.webm

Edit:

Sorry forgot to include example code. The above is rendered using:

<NumericInput value={this.state.buyMultiplier.times} />
<NumericInput value={this.state.buyMultiplier.percent} format={(n) => `${n}%`} />

Full source here

onChange is called when characters are entered, and when they are removed. However, it is not called when the last character is removed and the input changes from having some content to nothing.

Hello

When I look at the demo page it doesn't look the same in Chrome and Firefox
http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.5/index.html
In Chrome it isn't a spinbox

This was tested on Chrome 58 with responsive mode switched on which means it treats clicks as touch events. This results in step being done twice on a single click.

The following message gets logged in the console.

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

Hi,

any plans to integrate https://github.com/MikeMcl/bignumber.js/ at least as an option?

I like the UI work you've done, especially the arrow keys, but I'm not sure I understand how this component is useful if it A) stores its own state and B) doesn't have an onChange prop that gets called when the input changes? How is the value of this input supposed to affect the rest of the app state? The only way I can see is to use the parse prop but that feels like a hack.

IMHO a successful numeric input probably looks more like React widgets' approach, minus all of the localization complexity they've introduced. It's stateless & controlled by props.value always, not just at initialization. The parent component is then expected to use the provided onChange callback to do what it needs to in order to update app state, which is then reflected in a props update to NumberInput. State should be stored further up the hierarchy, not at a 'leaf' node like an <input>.

On the demos page, set the cursor to the end of the text in the field and have the precision set to a value greater than 0. Then start backspacing - once you get to the character immediately to the left of the decimal point, it adds the same number of zeros to the value as the precision.

Ex:
Precision = 2
Value = 50.00
Backspacing will change the value to 5000.0.

Hi, thanks for a great component :-)

I have a question: Is it possible to make the value "snap" to the next step when stepping up/down?

For example: I have a input with step: 0.25, precision: 2 and a value of 1.18.
Pressing the up button makes the value of course go to 1.43. Just wondering if it is possible for the value to "snap" to 1.25 instead..?

Sincerely,
Erik

Object.assign isn’t supported in any version of desktop or mobile Safari less than v9 and any IE, as well as any android browser (reference), which makes the component break in those browsers. The transform-object-assign babel plugin is a lightweight way to make it compatible (defaults to Object.assign, else uses a polyfill which babel already adds to your transpiled files; see the _extends helper).

I noticed in the latest version you have added a "strict" mode prop. When attempting to set this I am getting this error...

Warning: Unknown prop strict on tag. Remove this prop from the element ...

It also does not seem to be functioning as expected.

Problem description

I'm using "react": "^15.2.1", and "react-numeric-input": "^2.0.4". When I use this component, it gives me the following error,

warning.js:44 Warning: Unknown props mobile, onSelectStart on tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in input (created by NumericInput)
in span (created by NumericInput)
in NumericInput (created by kNumericInput)
in div (created by KNumericInput)
in div (created by KNumericInput)
in KNumericInput (created by KComponentWrapper)
in div (created by KComponentWrapper)
in KComponentWrapper (created by KForm)
in div (created by Paper)
in Paper (created by KForm)
in KForm (created by PageDetails)
in div (created by CardText)
in CardText (created by PageDetails)
in div (created by Card)
in div (created by Paper)
in Paper (created by Card)
in Card (created by PageDetails)
in PageDetails (created by KObjectPage)
in div (created by Paper)
in Paper (created by KObjectPage)
in KObjectPage (created by Connect(KObjectPage))
in Connect(KObjectPage) (created by RouterContext)
in div (created by Main)
in div (created by Main)
in MuiThemeProvider (created by Main)
in Main (created by Connect(Main))
in Connect(Main) (created by RouterContext)
in RouterContext (created by Router)
in Router
in Provider

Steps to reproduce

1. npm install react and react-numeric-input

2. Initialize the component.

              import NumericInput from 'react-numeric-input'
               <NumericInput
                   className="numericInput"
                   min={fieldContext.minValue}
                   max={fieldContext.maxValue}
                   value={this.props.value}
                   onChange={this.handleChange.bind(this)}
                   onBlur={this.handleBlur.bind(this)}
                   onFocus={this.handleFocus.bind(this)}
                   style={KNumericInputStyle}
               />
   

   Possible solution: https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b

Hey, perhaps I'm doing something wrong, here is my configuration

<NumericInput
    ref="offsetLeft"
    min={-100}
    max={100}
    step={1}
    onChange={this.setLabelLeftOffset}
    value={this.state.offsetLeft}
    size={4}
    style={{
        input: {
            marginRight: 3,
            paddingRight: 4,
            textAlign: 'right',
        },
        btnUp: {
            display: 'none',
        },
        btnDown: {
            display: 'none',
        },
    }}
/>

I'm trying to type a negative value inside the input starting by the character - (minus), but it does not register. I'm only allowed to go to the negative value if I use the arrow down or if a number is already typed.

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.

When using this in combination with the react-intl library, the formatting seems to cause issues. I have the following code:

`<NumericInput
className="k-textbox"
value={this.props.motorVoltage}
precision={0}
format={num => {
return this.props.intl.formatNumber(num);
}}
parse={num => {
var regex = new RegExp("[^0-9\,\-]+", "g");
var clean = String(num).replace( regex, '');
return parseFloat(clean);

}}
onChange={(valueAsNumber, valueAsString) => {this.props.onPropChange('motorVoltage', valueAsNumber)}} />`

The format function conversion the number to the i18n formatted version (for US it 1000 will be 1,000). The parse function reverses that formatting to a basic number (i.e. 1,000 becomes 1000 again).

What I'm seeing is if I type 1000, it correctly shows 1,000 in the input, but then if I type another 0 (i.e. trying to type 10000) instead of it showing 10,000 which I would expect, it shows 1. It seems that any action taken after getting the comma in the number breaks this completely. I would expect the input to rely entirely on the parse/format functions. My hunch is that there is a parseFloat being used somewhere instead of the _parse function

Hi, and thanks for your library.

Depending on the formatting function passed in (e.g. insertion of commas as a thousands-separator is a common one), the cursor can sometimes end up in surprising position for the user when typing. There is a decent treatment of the issue here: http://michaellaszlo.com/cursor-maintenance/introduction/
Is there any ability to accommodate for this with the current API?

If not, it would be useful for there to be some sort of 'cursor maintainer' function that when passed the input pre-and-post format, returns a new cursor position.

1. Click in NumericInput
2. Click in textarea
3. When textarea changed -> setState({comment:e.target.value}) -> rerender form with textarea & NumericInput

If you typing chars - all good, but when type backspace, arrow up, arrow down textarea unfocused and changing NumericInput

Video: https://www.youtube.com/watch?v=kxUnupPc2GQ

<NumericInput
	format={num => num + 'NZ$'}
/>

all is fine, but for

<NumericInput
	format={num => 'NZ$' + num}
/>

input is broken, cannot enter a value from keyboard

I have an app with many input fields which are depending on each other.
For example, when I change the value of input1 then input2 gets changed to input1 * 2 via a setState command.
This then triggers another onChange event for the input2. As I have many fields depending on each other this leads to a chain of onChange events. If I use the regular component, this doesn't happen.

My ideas on how to solve the problem:

1st idea: Make it possible to detect if the onchange is triggered by a user input. This way I can ignore the other events which are triggered by setState.

2nd idea: Only trigger onChange events after user inputs similar to the component.

Does anybody have another idea?

I use it with redux-form. I have value out of the min-max range. Input field shows correctly minimal value instead of original one. When I click in the input field I have original value instead of minimal, what I think is not correct. After leaving field onChange is called and value is correctly set to minimal value.
Maybe to call onChange in _toNumber function, when n is changed because of range would help.

Slight clarification between installation/usage.

Installation and Usage is slightly misleading
var NumericInput = require('react-numeric-input');
<NumericInput />

In reality you have to access the NumericInput within the import.
var NumericInput = require('react-numeric-input').NumericInput;

I can't handle multiple numeric inputs through a single function because only values are passed but not something to identify the source, such as target.
Or am I missing something?

How can I do 60nth minutes format with : delimiter?

13:15
12:30
14:45

When you try to use this component with the min property set - then you can't type numbers in a normal way.
Ex. you have min=100 - now try to type in 200 into input - it's impossible in normal way. You need to first add 2 at the start and then remove 1.
The way i see it - n = Math.min( Math.max(n, this.props.min), this.props.max ); should be disabled when input is focused. And parsing should occur on blur.

There is also a bug when using min property with onChange event. When you have for ex. min=100 and type 1 into input - it gets changed to 100 but onChange is fired only for typing 1, not on changing to 100.

Same thing according to formatted numbers. When you type in one character, cursor goes to the end of the string, disallowing you to type whole number in one go. I needed to hack it - disable formatting on focus - and re-enabling it on blur.

It doesn't appear that you can override the input box's border size or color. Is that true?

It started to throw that warning after installing the library

When I use the buttons to select a number, the min and max values are respected.

When I type a number however, I can type anything and the input value is only limited when I tab away (the actual value is respected, just not the display)

Is it possible to immediately enforce the max number when typing?

Hi there,
nice component, but having a problem with safari.
v2.0.4 worked fine with safari, but since then, it prevents switching focus properly, but worse,
it eats all your ram and then explodes :)

to reproduce, visit your demo link on a mac with safari, and click the up arrow on the first 2 input fields.
http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.5/index.html

I know there is onFocus props in there. I wanna know how I can focus into the content from somewhere else. I assigned a ref to it but it didnt work and told me there is no focus function.

Is there anyway to achieve this?

There should be an ability to pass in an autoFocus prop that can be used to set the inputFocus state variable.

Thanks for this library.
I am trying to this library and has few questions about it

1. Is it possible to have dynamic precision i.e can we have any number of digits after dot or can we remove dot if field can have both integer and floating point numbers
2. Does this support negative numbers ?

When trying to invoke from typescript file, I get the following runtime error:

warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `xyz`.

where xyz is the name of the file I'm calling from.
Everything compiles fine but react component does not render.

removing the NumberInput causes component to render

Hi,

The readonly propery doesn't seem to do work.
On the examples page, I can change the value using the up and down buttons, though I cannot enter a value in the text field directly.

For the control to be "read only" I would expect not to be able to change the value with the up/down buttons either

Documentation states how to import the component in TypeScript, implicating that NumericInput should work also with TypeScript. However, Visual Code complains about a missing type declaration
Niether of these commands installs the required typedeclaration file:

• npm install react-numeric-input --save
• npm install (at)types/react-numeric-input returns 404

If intended to be used with TypeScript, please also provide a type definition.

The latest version of the library (2.0.9) has some issue regarding the value of the input does not change at all.

To replicate, enter 215.62 value, and then select all (ctrl+a,cmd+a) then hit 7 or whatever number. It should change like the previous version (2.0.7). Is this intentional?

I'm using babelify 6.4.0 and browserify 12.0.1

[19:19:16] Browserify Error 
/Users/eric/af/frontend_app/node_modules/react-numeric-input/src/NumericInput.jsx:1
import { PropTypes, Component } from 'react';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

I send requests every 1s in my parent component. Then I noticed that somehow the value of NumericInput in child component is reset every 1s as well . Other inputs (from react-bootstrap) are not affected by request and not reset. Any idea how to fix it?