react-text-mask focus workaround

MaskedInput.tsx

import TextMask from 'react-text-mask';

// here goes quick and dirty hack, to activate text-mask on focus
class CustomTextMask extends TextMask {

  public render() {
    const { mask, guide, pipe, placeholderChar, keepCharPositions, value, onChange, showMask, ...props } = this.props;
    return (
      <input
        {...props}
        onFocus={this.onFocus}
        onInput={(event: ChangeEvent<HTMLInputElement>) => this.onChange(event)}
        defaultValue={this.props.value}
        ref={(inputElement: HTMLInputElement) => (this.inputElement = inputElement)}
      />
    );
  }

  private onFocus = () => {
    setTimeout(() => {
      this.inputElement.value = this.inputElement.value || ' ';
      this.textMaskInputElement.update();
    }, 0);
  }

}

export default CustomTextMask;