arthurtyukayev/use-keyboard-shortcut

A custom hook that allows adding keyboard shortcuts to React applications

use-keyboard-shortcut's Issues

react-hooks/exhaustive-deps

./src/utils/useKeyboardShortcut.js
  Line 95:6:   React Hook useEffect has a missing dependency: 'initalKeyMapping'. Either include it or remove the dependency array      
                react-hooks/exhaustive-deps
  Line 100:6:  React Hook useEffect has missing dependencies: 'keydownListener' and 'shortcutKeys'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
  Line 105:6:  React Hook useEffect has missing dependencies: 'keyupListener' and 'shortcutKeys'. Either include them or remove the dependency array    react-hooks/exhaustive-deps

i get these errors when i include useKeyboardShortcut.js - a proper way to remove them?

Override default keyboard shortcuts

Allow users to assign custom shortcuts that will replace those defined by browsers (such as CTRL+F)

Possibily by using event.preventDefault()

peerDependencies says this library doesn't work with React 17

The peerDependencies in package.json currently say this:

use-keyboard-shortcut/package.json

Lines 15 to 16 in 59b9c41

	"react": "^16.8.0",
	"react-dom": "^16.8.0"

In other words, only versions higher than 16.8.0, as long as the major version is still 16. React 17 has been out for quite a while though.

Control/command doesnt work on mac

tried this

  useKeyboardShortcut(['kVK_Control', 'C'], () => handleSave(), { overrideSystem: true })
and
  useKeyboardShortcut(['kVK_Command', 'C'], () => handleSave(), { overrideSystem: true })

Add typescript types to library

Hi,

I'm using everyday the library, I just find something missing, the typescript types ;)

Hava a nice day and be happy ! 🦄

accidentally deleted hook?

just a heads up that I think you accidentally deleted the code for the hook itself in lib/

Defining more than one shortcuts results in only firing last defined Shortcut

When i define two shortcuts like

    useKeyboardShortcut(['Control', 'A'], () => doSomethingA());
    useKeyboardShortcut(['Control', 'B'], () => doSomethingB());

I can use both Shortcuts, but only doSomethingB() is called.

The character contained in the shortcut for the input tag could not be entered #use-keyboard-shortcut

I use the library and when I try to enter any key in that shortcut, it cannot be entered. Here is my code:

on Control+T

I am facing issue in Contol + T short cut as it is opeing new tab, though i had already passed the option for system override true

Modifier Key Bugs

There is a known issue causing components with multiple hook calls that include modifier keys to malfunction.

If you have 2 or more hooks with META + S and META + A, it will malfunction after the first invocation.

I'm reviewing and debugging this now.

Keys array and keyboard event key should be lowercased

The keyboard event's key attribute is case sensitive. All references should be lowercase to avoid issues with shift keys.

key up event not triggered because target is blacklisted

We have a modal component shown up after a shortkeys combination, this modal component will set focus on a textarea after being rendered what disallows the keyupListener to dispatch a setKeys action.

Please, correct me if I am wrong but I think blacklistedTargetsshould not be checked on the keyupListener.

Shortcuts stop working once a browser shortcut has been used

Tested on Chrome, Firefox, and Edge with both my own code and your example. Using shortcuts work fine until a browser managed shortcut like Ctrl + P is used. They then stop working until the page is reloaded.

To reproduce on the example page:

• Mash Ctrl + F a few times, underlining works as expected
• Use a shortcut that isn't handled by the react app (E.g. Ctrl + P)
• Try to use Ctrl + F again, it doesn't do anything (the browser doesn't even handle it).

State needs to be reset after a successful callback.

I'm trying to use a 'Shift + f' key combination to trigger a callback. It works as desired the first time. However, after that the callback gets triggered on pressing either key. It doesn't wait for the combination.

Resetting the reducer's state after a successful callback solves the problem.

Meta + F only works the first time

Having used v. 1..0.6 for a while I recently tried updating to the latest version (which fixes another error).

It seems that since v. 1.1.0 Meta + F only works the first time. The second time it goes to the system default "search page".

useKeyboardShortcut(['Meta', 'F'], () => handleOpen(), {
    overrideSystem: true,
  });

Using React 16.14.0

Thanks!

Hook does not prevent the user to press more than the required shortcuts

When I add something like

const shortcutUndo = ['Control', 'Z']; useKeyboardShortcut(shortcutUndo, handleUndoShortcut);

and I press ctrl+shift+z or ctrl+y+z it still works.

Does anyone have an idea on how to prevent this?

Avoiding keypress events in editable divs

Is it possible to stop event triggering if i'm editing an editable div? The triggers work perfectly fine, and don't work in input elements which is expected but trigger if I'm editing an editable div. Is there a way to avoid that? Thanks

Hook blocks characters used in a combination-shortcut from every input field

The key handler eats character keys used in a shortcut even when the modifier is not pressed.

Eg: if I define CTRL+S as shortcut I can't type 's' in any input anymore.

Repro:

• Open a page with this hook and a key combination shortcut, like CTRL+S or CTRL+A, and an input field.
• For example use the online demo from the manual and use your browsers developer inspector to add an input element.
• Try typing in the input field. All characters work except ones used in one of the shortcuts (eg: 'a' or 's' in the demo)

Expected result:

I'd expect the combination shortcuts don't block normal single character input.

Unhandled Error: Breaking Change

Version 1.1.5

SyntaxError: Cannot use import statement outside a module in Next.js Project

import useKeyboardShortcut from './lib/useKeyboardShortcut'
^^^^^^

SyntaxError: Cannot use import statement outside a module

Can't perform a React state update on an unmounted component.

Can't perform a React state update on an unmounted component. error shown in console after component unmounted

I created pull request that fix this problem #27