mantinedev / mantine

A fully featured React components library
https://mantine.dev
MIT License
26.79k stars 1.9k forks source link

useHotkeys doesn't detect plus key #7123

Open ianparkinson opened 1 day ago

ianparkinson commented 1 day ago

Dependencies check up

What version of @mantine/* packages do you have in package.json?

7.14.0

What package has an issue?

@mantine/hooks

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

useHotkeys from @mantine/hooks doesn't appear to allow binding actions to the + key. Other arithmetical operations (/, *, -) work as expected. In other words, with:

  useHotkeys([
    ['/', handle],
    ['*', handle],
    ['-', handle],
    ['+', handle],
  ]);

...handle gets triggered with any of the /, * or - keys, but not +.

The use-hotkeys documentation links to Key values for keyboard events at MDN, which in turn suggests that the string Add might once have worked, but works no longer in modern browsers. I've also verified that the strings Add, Multply etc. don't work on Chrome 130.0.6723.116.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-zrxnsn

Possible fix

parseHotkey supports strings like alt+j to specify modifiers. It starts with:

  const keys = hotkey
    .toLowerCase()
    .split('+')
    .map((part) => part.trim());

which splits the modifier string up into its individual parts. It goes on to check for modifier names such as alt, shift etc. This unfortunately removes any instances of '+' in the hotkey string. Any fix will presumably involve improving this parsing logic to support +, alt++ etc.

Self-service