Имитация реального щелчка мыши в React

Question

Мне нужно смоделировать реальный щелчок мышью в React. Тот, который заставит любой ввод с фокусом получать обычные последующие события (например, изменение, размытие и т. Д.).

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

const mouseClickEvents = ['mousedown']; //, 'click', 'mouseup'];
function simulateClick(element){
  mouseClickEvents.forEach(mouseEventType =>
    element.dispatchEvent(
      new MouseEvent(mouseEventType, {
        view: window,
        bubbles: true,
        cancelable: true,
        buttons: 1
      })
    )
  );
}

class C1 extends Component {
. . .
onMouseDown(e) {
  // simulate click on C2
  if (myConditionForSimulatingClick) {
    simulateClick(document.getElementsByClassName('c2')[0]);
    return;
  }
  . . .
}
. . .
}

Если у входа на каком-либо компоненте есть фокус, и я действительно нажимаю на C2 (у которого нет обработчика щелчков), на вход поступают события изменения и размытия.

Но, если тот же вход имеет фокус и я нажимаю на С1, смоделированное событие проходит до С1, но больше ничего не происходит (вход не получает никаких событий, пока я фактически не щелкну где-нибудь еще в приложении). Это то, что мне нужно: элемент с фокусом должен быть изменен и размыт, даже когда был смоделирован клик. Это возможно?

Я попытался остановить распространение и запретить использование по умолчанию для события mousedown C1, но ни один (даже вместе) ничего не изменил.

Может кто-нибудь помочь?