Реагировать на изменение типа входного сигнала вызывает размытие в Firefox

Question

У меня есть поле ввода в реагировать (как начальной загрузки FormControl), который меняет свой тип с текста на номер, если он находится в фокусе.

Идея состоит в том, что пользователь может вводить только цифры, но если он не в фокусе, он возвращается к тексту и также показывает единицы измерения.Это отлично работает в Chrome.Однако в Firefox, когда я изменяю тип поля ввода или уничтожаю его (визуализирую условно), он запускает событие размытия.

Так что мой вопрос: есть ли способ отличить событие размытия, запущенное firefox (на уничтожение или изменение типа) и огонь размытия пользователем, фокусирующимся на чем-то еще?

Поведение можно увидеть в этой скрипке .

onBlur() => this.setState({ focused: false });

Answer 1

Возможно добавление e.preventDefault() или e.stopPropagation() в функцию onBlur.Однако вы можете проверить relatedTarget в событии onBlur.Если relatedTarget не является полем ввода, focus будет focus:false.Возможно, это не лучший подход, но он работает.

  onBlur(e) {
    console.log('blur is called');
    if(!e.relatedTarget || e.relatedTarget.className !== "form-control" ) {
     this.setState({ focused: false });
    } 
  }