I am using onBlur to change the state of the error, to validate the value in the input component. But as the user click away from the input, it takes a few seconds until he can click back the input to change the value.

Can anyone know why this happens? Another question,how can I change the type of the event returned from onBlur so not to be 'any'?

Form.tsx

  const [errorFlag, setErrorFlag] = useState(false);
  const [plz, setPLZ] = useState<string | undefined>(undefined);

  const onBlur = (e:any) => {
    setErrorFlag(e.target.checkValidity());
    };
      return (<Fragment>
          ...
          <Input 
            onChange={setPLZ}
            name="PLZ" 
            pattern="^[0-9]{5}$"
            errorMessage="* Invalid Postal Code"
            error={plz === ''} 
            required={true}
            onBlur={onBlur}  
            style={{ flexGrow: 0, width: '100px', marginRight: '20px' }}
          />
        </Fragment>)

FormInput.tsx

export interface InputProps {
  ...
  onChange?: (value: string) => void;
  onBlur?:(event: React.ChangeEvent<HTMLInputElement>) => void;
}

export class Input extends React.Component<InputProps, {
  value: string;
}> {

  constructor(props: InputProps) {
    super(props);
    this.state = { value: '' };
  }

  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ value: event.target.value });
    this.props.onChange?.(event.target.value);
   
  }
  private onBlur = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.props.onBlur?.(event);
 }
  
  render() {

    return (
      <div key="form-name" className="formrow" style={{...this.props.style}}>
        <input 
          ... 
          onChange={this.onChange} 
          onBlur={this.onBlur}
          />
        <span id="formInput-errorspan" className="errorSpan">{this.props.errorMessage}</span>
      </div>
    );
  }
}