Simulate mouse click on button without physical click

Question

I have buttons that use the react library react-ink with onClick canvas animation. That animation only works when button is clicked by mouse(cursor). In my view I use buttons that have a hotkey assigned to them and I need to trigger "click" animation even when I click hotkey on my keyboard.

I tried to use dispatchEvent to simulate click on proper height and width but its doesn't work

my example:

const el = wrapperRef.current.querySelectorAll(`[data-target="${value.id}"]`)[0]
const elPosition = el.getBoundingClientRect();
const evt = new MouseEvent("mousedown", {
              'view': window,
              'bubbles': true,
              'cancelable': true,
              'screenX': elPosition.left,
              'screenY': elPosition.top
            });
 el.dispatchEvent(evt);

// button
  <div
     data-target={props.values.id}
     role="button">
     <Ink hasTouch={false} />
  </div>

https://stackoverflow.com/a/40091156/1772933 might help – Kinglish Jun 23 '21 at 19:57 — Kinglish, Jun 23 '21 at 19:57

score 1 · Answer 1 · answered Jun 23 '21 at 21:04

1

did you tried useRef() on ink button component, if it had click prop, so you can fire it like below: const btn =useref();

<Ink ref={btn} ...

in keybord event listener exec this

btn.current.click()

answered Jun 23 '21 at 21:04

shahrooz bazrafshan

545
4
17

Simulate mouse click on button without physical click

1 Answers1