onChange is not triggering for NumericInput in react

Question

i have the following component where the onChange is not triggering, it is quite simillar to the following post props onChange is not triggering however the solution isnt helping much

basically its creating a form based on a parsed xml, the inputGroup is correctly triggering the onchange function while the NumericInput isnt triggering the onchange.

any help appreciated.

    <!-- language: lang-js -->

    import React from 'react';
    import { NumericInput, InputGroup,FormGroup } from "@blueprintjs/core";
    import './palantir.css'; 

    class Byte extends React.Component {

      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(k,e) {
        this.props.onConfigChange(k,e.target.value);
      }

      render() {
        var minmaxlen = this.props.input_conf._minmaxlen;
        var maxlen = minmaxlen != null ? minmaxlen.split("-")[1] :''
        var minlen = minmaxlen != null ? minmaxlen.split("-")[0] :''

        var minmaxvalue = this.props.input_conf._minmaxval;
        var maxvalue = minmaxvalue != null ? minmaxvalue.split("-")[1] :''
        var minvalue = minmaxvalue != null ? minmaxvalue.split("-")[0] :''
        var pattern = this.props.input_conf._regex ? 'pattern='+this.props.input_conf._regex : ''

        console.log('minvalue================',minvalue)

        if(minvalue == '') {
          if(this.props.input_conf._regex != null) {
          return (
             <FormGroup
               className="formatcard"
               label={this.props.conf_name}
               labelFor="text-input" inline="true">
               <InputGroup pattern={this.props.input_conf._regex || ''} minLength={minlen || ''} maxLength={maxlen || ''} 
                placeholder="Placeholder text" value={this.props.input_conf.value || ''} 
                onChange={e => this.handleChange(this.props.input_conf.ID, e)} />
             </FormGroup>   
          );
        } else {
          return (
             <FormGroup
               className="formatcard"
               label={this.props.conf_name}
               labelFor="text-input" inline="true">
               <InputGroup minLength={minlen || ''} maxLength={maxlen || ''} 
                placeholder="Placeholder text" value={this.props.input_conf.value || ''} 
                onChange={e => this.handleChange(this.props.input_conf.ID, e)} />
             </FormGroup>   
          );
        }
        } else {
          return (

//this part is causing issue the numeric input is not triggering the onchange function and not updating the state
           <FormGroup
             className="formatcard"
             label={this.props.conf_name}
             labelFor="text-input" inline="true">
             <NumericInput  allowNumericCharactersOnly="true" clampValueOnBlur="true"
              min = {minvalue || ''} max ={maxvalue || ''} placeholder="Placeholder text" value={this.props.input_conf.value || ''} 
              onChange={e => this.handleChange(this.props.input_conf.ID, e)} />
           </FormGroup>   
          );
        }
      }

    }

    export default Byte;

<!-- end snippet -->

Rajneesh Kumar Gobin · Accepted Answer · 2020-01-09 06:28:25Z

3

just found out that numericInput uses onValueChange instead of onChange in case this helps out any one :)

answered Jan 9, 2020 at 6:28

Rajneesh Kumar Gobin

5081 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

elvis_ferns · Accepted Answer · 2020-01-09 06:56:46Z

1

You can check all the avialable props for your component:

https://blueprintjs.com/docs/#core/components/numeric-input[NumvericInput-doc][1]

answered Jan 9, 2020 at 6:56

elvis_ferns

5241 gold badge6 silver badges14 bronze badges

Collectives™ on Stack Overflow

onChange is not triggering for NumericInput in react

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related