onComplete callback

[gargantuan]

An on complete callback would be useful. For example, if using this component as a date input, the values have no meaning until the the mask is completed. It would be convenient to not have to worry about parsing dates until we're confident that the mask has been completed.

[jurassix]

@gargantuan I have this need as well.

I'm working around this by doing the following. Unfortunately, isFilled is an internal API and fragile. We really need an onComplete to harden this.

import React, { Component } from 'react';
import InputMask from 'react-input-mask';
import { isFilled } from 'react-input-mask/lib/utils/string';

class Example extends Component {
  handleBlur = event => {
    if (isFilled(this.maskInput.maskOptions, this.maskInput.value)) {
      return this.props.onChange(this.maskedInput.value);
    }
  };

  render() {
    return (
      <InputMask
        ref={ref => {
          this.maskInput = ref.input;
        }}
        onBlur={this.handleBlur}
        mask={this.props.mask}
      />
    );
  }
}

[jurassix]

@sanniassin are you open to a PR with this new API added? Any thoughts on naming etc?

[jurassix]

Ideally, something like this.

import React, { Component } from 'react';
import InputMask from 'react-input-mask';

class Example extends Component {
  handleComplete = event => this.props.onChange(this.maskedInput.value);

  render() {
    return (
      <InputMask
        ref={ref => {
          this.maskInput = ref.input;
        }}
        onComplete={this.handleComplete}
        mask={this.props.mask}
      />
    );
  }
}