Infine loop when using useHotKeys to dispatch a keyboard event

[deyemiobaa]

Hi, I want to create a feature in my app that lets specific key carry out the functions of other keys. Example: when I click "m", I want it to function like I clicked "tab". Here's the code I'm using for this

 useHotkeys("m", () => {
  const pressTab = new KeyboardEvent("keydown", {
    key: "tab",
  })
  document.dispatchEvent(pressTab)
})

This is the error is gives

Uncaught RangeError: Maximum call stack size exceeded.
    at Object.current (UploadNewTest.tsx:19:14)
    at useHotkeys.ts:99:17
    at Array.forEach (<anonymous>)
    at listener2 (useHotkeys.ts:82:59)
    at HTMLDocument.handleKeyDown2 (useHotkeys.ts:117:9)
    at Object.current (UploadNewTest.tsx:19:14)
    at useHotkeys.ts:99:17
    at Array.forEach (<anonymous>)
    at listener2 (useHotkeys.ts:82:59)
    at HTMLDocument.handleKeyDown2 (useHotkeys.ts:117:9)

Is there a workaround for this? Any help would be appreciated, thanks.

[JohannesKlauss]

lease provide a reproducible with the expected behavior and the actual behavior explained. There is a bug template in the issues section that guides you through the process of creating a bug ticket.