onInvalid never triggered

[pandaorb]

Hi! I’m having trouble triggering the onInvalid event in my NumericInput, which is a simple react-numeric-input. The documentation (https://www.npmjs.com/package/react-numeric-input) states that onInvalid will be called with errorMessage, valueAsNumber, and valueAsString. I use valueAsNumber in the onChange event in an attempt to trigger the onInvalid event, but the breakpoint in _elevationInvalid is never hit even when valueAsNumber returns NaN. Any guidance you could provide on how to properly use this event would be great!

public render() {
  return (
    <NumericInput value={this.state.elevation} onChange={this._elevationChange} onInvalid={this._elevationInvalid} />
  );
}

private _elevationChange = (_value: number | null, _stringValue: string, input: HTMLInputElement) => {
  const validatedValue = input.valueAsNumber;
  // do stuff
}

private _elevationInvalid = (error: string, _value: number | null, stringValue: string) => {
  // do stuff
}

[Nileshdcool]

any update on this .. how to mark control as invalid?

[rafaelperozin]

I had the same issue with onInvalid, the onChange is not fired when the user tries to add more than max. Using observer of mobx ovbserver or useStateI lose the current value due to re-render the NumericInput

So... after some work, I found an alternative solution for warning messages.

1. I created a specific component for the <NumericInput /> and I called it as QuantityPicker.

export const QuantityPicker: React.FC<QuantityPickerProps> = ({value, min, max, newValue}) => {
  const inputValue = value ? value : 0;
  const inputMin = min ? min : 0;
  const inputMax = max ? max : 10;

  return (
    <div>
      <div style={{maxWidth: 112}}>
        {min && max && min === max ? (
          <input type="number" value={1} style={{maxWidth: 112, textAlign: 'center'}} disabled />
        ) : (
          <NumericInput
            className="form-control"
            value={inputValue}
            min={inputMin}
            max={inputMax}
            onChange={(value: number | null) => newValue({value, min: inputMin, max: inputMax})}
            size={5}
            mobile
            required
          />
        )}
      </div>
    </div>
  );
};

2. onChange calls a callback function on the parent component.

onChange={(value: number | null) => newValue({value, min: inputMin, max: inputMax})}

3. At the parent component I do handleQuantityMessage when the call back is fired.

<QuantityPicker value={0} min={modifier.minQty} max={modifier.maxQty} newValue={handleQuantityError} />

const handleQuantityMessage = ({
  value,
  min,
  max,
}: QuantityMessageProps): void => {
  if (value === max) {
    console.log("## WARNING: You on the MAX limit");
  }
  if (value === min) {
    console.log("## WARNING: You on the MIN limit");
  }
  console.log("FINE:", value, min, max);
};