Принудительный фокус на элементе кнопки, который был отключен в предыдущем рендере

У меня есть кнопка, которая открывает модальное событие onClick. Я хочу, чтобы кнопка отключалась после того, как пользователь щелкнул ее, и снова включилась, когда модальное окно закрывается.

Я установил начальное состояние btnDisabled как false и сделал следующее: (работает, как и ожидалось)

<Button
    label='Mybutton'
    className={['btn-outline-primary']}
    onClick={this.loadModel}
    disabled={this.state.btnDisabled}
/>

Обработчик кнопки onClick выглядит следующим образом:

loadModel(event) {
    this.setState({
      ModelOpen: true,
      btnDisabled: true,
    });
    this.activeElement = event.target;
  }

Модальный обработчик кнопки закрытия(x) выглядит следующим образом:

closeModel() {
    this.setState({
      ModelOpen: false,
      btnDisabled: false,
    });
    this.activeElement.focus();
  }

Проблема в том, что фокус не смещается на Mybutton. Когда я пытаюсь вывести document.activeElement.outerHTML в журнал консоли, он выводит кнопку закрытия. Из-за этого мои тесты терпят неудачу, так как они ожидают, что MyButton будет активным элементом.

ОБНОВЛЕНИЕ Тесты работают нормально, если я удалю логику отключения кнопки. Вот утверждение, которое не соответствует действительности:

expect(wrapper.find('.btn-outline-primary').html()).toEqual(document.activeElement.outerHTML);

person Z.Amir    schedule 06.05.2019    source источник


Ответы (1)


Вы добавляете eventListener в элемент Button. В javascript причина всплытия события может быть разной.

попробуйте использовать event.currentTarget, чтобы получить экземпляр кнопки. Надеюсь это поможет. Будет лучше, если вы предоставите фрагмент проблемы здесь.

person SomberTuna    schedule 06.05.2019
comment
Я обновил вопрос, чтобы отразить код, который не работает - person Z.Amir; 06.05.2019