Simulate mouse click on button without physical click [duplicate]

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>

stackoverflow.com/a/40091156/1772933 might help

Kinglish
– Kinglish

2021-06-23 19:57:16 +00:00
Commented Jun 23, 2021 at 19:57 — Kinglish
– Kinglish, Commented Jun 23, 2021 at 19:57

shahrooz bazrafshan · Accepted Answer · 2021-06-23 21:04:42Z

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()

Collectives™ on Stack Overflow

Simulate mouse click on button without physical click [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related