NumberInput does not trigger onMinus/onPlus when cursor keys are used

[gbraad]

Using:

import React from 'react';
import { NumberInput } from '@patternfly/react-core';

class BasicNumberInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 8192
    };

    this.onMinus = () => {
      //if (this.state.value - 512 < 0)  // can not be clamped here (ignored by cursor keys)
      //  return
      this.setState({
        value: this.state.value - 512
      });
    };

    this.onChange = event => {
      //if (this.state.value < 0) {   // also needs to clamp here
      //  this.setState({
      //    value: Number(0)
      //  });
      //  return;
      //}

      this.setState({
        value: Number(event.target.value)
      });
    };

    this.onPlus = () => {
      this.setState({
        value: this.state.value + 512
      });
    };
  }

  render() {
    const { value } = this.state;
    return (
      <NumberInput
        value={value}
        onMinus={this.onMinus}
        onChange={this.onChange}
        onPlus={this.onPlus}
        inputName="input"
        inputAriaLabel="number input"
        minusBtnAriaLabel="minus"
        plusBtnAriaLabel="plus"
      />
    );
  }
}

I would like to allow the user to easily increment a memory value in steps of 512. Using the buttons this works, but when the user has selected the input textbox itself, the cursor keys are not regarded as a plus or minus operation and do not trigger the events.

While this can make for great for control, but it is not expected. However, the worst is that now the clamping needs to happen in the onChange

[gbraad]

Suggestion

Use an eventlistener on the input that handles onkeydown:
In the event:

   if ([38, 40].indexOf(event.keyCode) > -1) {
      event.preventDefault();
   }

With the keycodes being:

• 38 - up
• 40 - down

to prevent the use of navigational keys to change the value.

Or perform:

   if (event.keyCode === 38) {
      event.preventDefault();
      onPlus();
   }
   if (event.keyCode === 40) {
      event.preventDefault();
      onMinus();
   }

to invoke the expected functions that increase or decreases the values.