I am having issues about onBlur event with react-typescript. To recreate the issues I hit upButton to make the nights go to 9+ and it's the maximum and if user keep clicking upButton it will appear the error above the input.

Here is the image: and here is my code base:

class MvSpinner extends React.Component<Props, MvSpinnerState> {
  constructor(props:Props) {
    super(props);
    this.upButton = this.upButton.bind(this);
    this.downButton = this.downButton.bind(this);
    this.clear = this.clear.bind(this);
    this.drawResult = this.drawResult.bind(this);
    this.state = {
      text: "",
      open: false,
      showSoftError: false,
      showHardError: false,
    };
  }

  upButton() {
    let currentValue = this.props.value;
    if (currentValue === this.props.max) {
      this.setState({ showSoftError: true, showHardError: true });
    }

    if (currentValue < this.props.max && !this.props.disabled) {
      currentValue++;
      this.drawResult();
      this.onChange(currentValue);
    }

  }

  downButton() {
    let currentValue = this.props.value;
    if (currentValue > this.props.min && !this.props.disabled) {
      currentValue--;
      this.drawResult();
      this.onChange(currentValue);
    }
  }

  clear() {
    this.setState({
      open: true
    });
  }

  drawResult() {
    this.setState({
      open: false,
      showSoftError: false,
      showHardError: false,
    });
  }

    return (
         ...
        <label className="visuallyhidden" htmlFor={this.props.name}>{this.props.label}</label>
        {content}
        <div className="spinner-controls">
          <button
            tabIndex={-1}
            aria-label="increment"
            className="spinner-control-up"
            type="button"
            onBlur={this.drawResult}
            onClick={this.upButton}
          />
          <button
            tabIndex={-1}
            aria-label="decrement"
            className="spinner-control-down"
            type="button"
            onClick={this.downButton}
          />
        </div>
        <div className="error tool-tip">
          <div
            className={"tool-tip-popup " + (err ? "show" : "")}
            style={this.props.errorStyle}
          >
            <p>{err}</p>
          </div>
        </div>
     ...
);

when I click outside of the upButton it will disspear the error tooltip but when I switch to safari it did not work. Does anyone have idea how to fix this error ????

Thanks!!!!