Javascript не может вручную обработать событие мыши для реагирующих кнопок

Question

У меня есть две кнопки, одна отрисовывается с помощью React, а другая - с обычным HTML, и у них одинаковые обработчики для mousedown и mouseup. Хотя они работают правильно при нажатии, когда я пытаюсь вручную отправить события mousedown и mouseup вручную (по .dispatch(new MouseEvent)), только событие HTML получает событие, а событие React - нет. В процессе не возникает никаких ошибок, и при отправке событий для любой кнопки возвращается true.

Я сделал простой CodePen , чтобы проиллюстрировать мою проблему.

На ручке есть две кнопки, одна отрисовывается с помощью React, а другая - с помощью обычного HTML, события mousedown и mouseup которого имеют простые визуальные эффекты. Ручная отправка может быть выполнена нажатием пробела.

Моя среда - последняя версия Vivaldi с движком JavaScript V8 7.1.302.31

Ожидается, что кнопка React получит отправленное событие и будет вести себя так же, как и при нажатии.

Answer 1

Вдохновлен этим вопросом

Я должен установить bubbles: true при создании события. В примере для MDN используются следующие три параметра

new MouseEvent("mousedown", {
  bubbles: true,
  cancelable: true,
  view: window
})