NumberInput cannot be controlled in case an invalid value has been entered directly

The NumberControl ignores the value property if invalid data has been entered in the input field directly

Detailed description

Using a simple

currentValue = 2;
<NumberInput
   min={0}
   max={10}
   value={currentValue}
   onChange={...}
/>

If a user enters something invalid like ,, into the input field directly, it is not possible to ignore such input in onChange by keeping the currently used value property. Which means that NumberControl cannot be properly controlled if it gets into invalid state.

Additional information

Code wise this is due to the implementation of

static getDerivedStateFromProps({ min, value }, state) {
    const { prevValue } = state;
    return prevValue === value
      ? null
      : {
          value: isNaN(min) ? value : Math.max(min, value),
          prevValue: value,
        };
  }

This method is the only place where state.prevValue is changed. Given the condition prevValue === value, this method will only ever update the state if prevValue !== value. Which means it is not possible to ignore input because ignoring means to provide the same value property all the time, which causes prevValue === value to hold.

At the same time

 handleChange = evt => {
    if (!this.props.disabled) {
      evt.persist();
      evt.imaginaryTarget = this._inputRef;
      this.setState(
        {
          value: evt.target.value,
        },
        () => {
          this.props.onChange(evt);
        }
      );
    }
  };

ensures that even invalid data entered into the input field updates the internal state (which cannot be patched from outside due to the finding above).

Expected behavior: It should be possible to enforce a certain value using properties.

[asudoh]

Current code does not seem to do min/max capping before onChange() fires. I’d recommend min/max capping yourself given you specify min/max.

[asudoh]

Hi @anschoen 👋 thank you for reporting - Dropped the following code into https://codesandbox.io/s/github/IBM/carbon-components-react/tree/master/examples/codesandbox but couldn’t reproduce the issue (comma couldn’t be entered there):

import React from 'react';
import { render } from 'react-dom';
import { NumberInput } from 'carbon-components-react';

let currentValue = 2;

const App = () => (
  <div>
    <NumberInput
      min={0}
      max={10}
      value={currentValue}
      onChange={evt => {
        console.log('Event:', evt);
      }}
    />
  </div>
);

render(<App />, document.getElementById('root'));

That said, do you want to create a reduced case like that? Thanks!