react-hotkeys-hook icon indicating copy to clipboard operation
react-hotkeys-hook copied to clipboard

Mac: 'option+n' don't trigger callback

Open SO-Eng opened this issue 3 years ago • 2 comments

We have a WebApp, where we implemented 'alt+n' to open a form. This also triggers, when user focuses an input field and press 'alt+n'. Means, current form will be saved and a new one will be opened. Everything work's as expected!

Now we refactor all our hotkey events for Mac users and we struggle at 'option+n'. It work'e well, when no form is open. Also when the form is open, but no input field is focused. But when an input field is focused (and that should be the most case in a form), 'option+n' writes a tilde '~' and nothing happens.

We also have 'alt+t, option+t' to open a modal with templates to fill the form. This also work's well with alt and option as modifier.

Only 'option+n' doesn't. Any idea why? What I recognized in this sample code from your documentation page now, that 'option+n' counts 2 up when not focusing the input field, but 'alt+n' or 'option+t' counts 1 as it should. Seems to be that underline below tilde what is shown but does not remain.

function ExampleComponent() {
  const [count, setCount] = useState(0)

  useHotkeys(
   'alt+n, option+t, option+n', 
   (e) => {
     e.preventDefault;
     setCount(prevCount => prevCount + 1);
   },
   {
     enableOnTags: ["INPUT", "TEXTAREA"],
   }
  );

  return (
  <div>
    <span>Received the combination {count} times.</span>
    <input />
  </div>
  )
}

SO-Eng avatar Jan 18 '22 20:01 SO-Eng

Hi @SO-Eng thx for raising that issue. I'll check that out and come back to you :)

JohannesKlauss avatar Jan 19 '22 09:01 JohannesKlauss

The same issue seems to happen on MacBook for firefox for all other combinations. Example: I show a popup, in the event of clicking CMD + F6, and none of the other combinations such as Option + F6 or SHIFT + F6 work.

arbiasgj avatar Jul 21 '22 16:07 arbiasgj

I also ran into this too on Chrome on macOS Ventura. Defining a hotkey for 'option+1' (or 'option+2') didn't register. Interestingly, it seems to be a regression in version 4.0.2 since reverting to version 3.4.7 fixed it.

saurabhsharan avatar Nov 05 '22 15:11 saurabhsharan

I ran into this as well, with 'alt+.'. I found a workaround; I suspect something is matching against the typed character (i.e. holding "option" and pressing "." outputs "≥"). Defining the hotkey as 'alt+., alt+≥' works without issue.

For reference, with this event listener...

document.addEventListener('keydown', e => {
  console.log(e.key, e.code)
})

I got this output from typing option + period, comma, t, n, 1 and 2: Screen Shot 2022-11-16 at 12 51 55 PM

robertaird avatar Nov 16 '22 18:11 robertaird

Fixed in 4.1.0

JohannesKlauss avatar Dec 25 '22 14:12 JohannesKlauss