Blueprint: [NumericInput] "integer only" mode

[reyronald]

Hello everyone,

First of all, amazing work with this library! One of the most robust out there and everyone on my team is loving it! Now onto the issue...

I have a use case for the NumericInput component where I need to only accept integer numbers. I've already wrapped it inside another component of my own that augments it with this behavior, but I'm thinking it would be nice to have Blueprint come with this feature by itself. Maybe passing down a prop like integersOnly={true|false} , mode={'integer'|'decimal'} or something similar.

What do you guys think? Is it something that can be inside the scope of this component or library? And if it is, would you be accepting PR contributions for it?

[giladgray]

@reyronald what does your wrapper component look like? is it much code? I imagine this is pretty easy to handle app-side by massaging the step props and doing a parseInt() in your change handler.

[reyronald]

This is how it looks. I'm using Math.round instead of parseInt though because the latter truncates the decimals, so for any non-integer minorStepSize, stepping down with Alt would actually cause the number to change (e.g. "10", then tapping Alt+↓ => "9.9", which will end up as "9", with parsing).

Haven't taken it into production or given it much use yet, so there might be some cases that I haven't though of.

import React, { Component } from 'react';
import { NumericInput } from '@blueprintjs/core/dist/components/forms/numericInput';
import { Utils } from '@blueprintjs/core/dist/common';

class IntegerInput extends Component {
  state = { value: null };

  handleValueChange = valueAsNumber => {
    const value = Math.round(valueAsNumber);
    this.setState({ value });
    Utils.safeInvoke(this.props.onValueChange, value, value.toString());
  };

  render() {
    return (
      <NumericInput
        {...this.props}
        onValueChange={this.handleValueChange}
        value={this.state.value}
      />
    );
  }
}

export default IntegerInput;

Coming back and looking at it today, not really sure if it would be a worthwhile addition to the library. A warning could be added too if a non-integer step size or min/max is set as a prop when using it this way, so something else to consider.

[cmslewis]

@reyronald quick FYI:

It's not documented, but you can pass null for minorStepSize or majorStepSize to disable the corresponding Alt+increment or Shift+increment interaction.

[reyronald]

Oh, that's cool! Will take it into consideration, thanks for the tip! @cmslewis

[cmslewis]

Filed: https://github.com/palantir/blueprint/issues/1978

[tnrich]

I still think a simple normalize function or an option to specify step size (including via typing) would be appreciated here.