react-hotkeys [BUG] Sequences in keyMap prevent combinations from working

Describe the bug When adding a sequence to your keyMap (such as 'up up down down left right left right a b'), combinations (such as 'ctrl+alt+t') no longer work correctly - they will sometimes trigger the first time the key combination is pressed, but not the second time.

Once the window loses focus, and KeyEventManager._clearKeyHistory() https://github.com/greena13/react-hotkeys/blob/80a13fbf09fca9fbd79b2b6de24b05e00e8f13e7/src/lib/KeyEventManager.js#L110 runs, the combination will again work just one time and then stop working until KeyEventManager._clearKeyHistory() runs again.

It's worth noting that the sequence ('up up down down left right left right a b') works correctly throughout.

How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc) Using a <GlobalHotKeys> right now, but this bug also occurs with <HotKeys>

Example code:

configure({
  ignoreTags: [],
  logLevel: 'verbose'
})
const hotKeyMap = {
  openSearchDialog: 'ctrl+alt+t',
  konami: 'up up down down left right left right a b'
}

...

render () {
    return (
      <SomeComponent>
        <GlobalHotKeys
          keyMap={hotKeyMap}
          handlers={{
            openSearchDialog: () => console.log('openSearchDialog'),
            konami: () => console.log('konami')
          }}
          allowChanges
      </SomeComponent>
    )
  }

Expected behavior I expect that sequences and combinations can both be used without interfering with each other.

Platform (please complete the following information):

Version of react-hotkeys 2.0.0
Browser tested in chrome and firefox
OS: macOS High Sierra

Are you willing and able to create a PR request to fix this issue? Probably not, sorry. We aren't actually using key sequences in our application right now, just combinations

Include the smallest log that includes your issue:

The 'small' log generated with verbose is 3000 lines long, so here's a log with debug instead:

HotKeys (GLOBAL-E1💚): New 'Control' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E1💚-C0🔺): No matching actions found for 'Control' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E2💙): New (simulated) 'Control' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E2💙): Ignored 'Control' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E3💛): New 'Alt' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E3💛-C0🔺): No matching actions found for 'Alt+Control' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E4💜): New (simulated) 'Alt' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E4💜): Ignored 'Alt+Control' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E5🧡): New '†' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:464 HotKeys (GLOBAL-E5🧡-C0🔺): Found action that matches 'Alt+Control+†': itemSearch. Calling handler . . .
App.js:62 openSearchDialog // Search dialog correctly opens the first time
GlobalKeyEventStrategy.js:254 HotKeys (GLOBAL-C0🔺): Global component 0 updated.
GlobalKeyEventStrategy.js:671 HotKeys (GLOBAL-E5🧡-C0🔺): Stopping further event propagation.
GlobalKeyEventStrategy.js:663 HotKeys (GLOBAL-E5🧡): Searching no further, as handler has been found (and called).
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E6❤️): New '†' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E6❤️): Ignored 'Alt+Control+†' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E7💚): New '†' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E7💚): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E8💙): New 'Control' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E8💙): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E9💛): New 'Alt' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E9💛): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E10💜): New 'Control' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E10💜-C0🔺): No matching actions found for 'Control' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E11🧡): New (simulated) 'Control' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E11🧡): Ignored 'Control' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E12❤️): New 'Alt' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E12❤️-C0🔺): No matching actions found for 'Alt+Control' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E13💚): New (simulated) 'Alt' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E13💚): Ignored 'Alt+Control' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E14💙): New '†' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E14💙-C0🔺): No matching actions found for 'Alt+Control+†' keydown. // This is a bug - an action should have been found for this combination
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E15💛): New '†' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E15💛): Ignored 'Alt+Control+†' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E16💜): New '†' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E16💜): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E17🧡): New 'Control' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E17🧡): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E18❤️): New 'Alt' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E18❤️): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
KeyEventManager.js:183 HotKeys: Window focused - clearing key history \\ KeyEventManager._clearKeyHistory() is called
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E19💚): New 'Control' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E19💚-C0🔺): No matching actions found for 'Control' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E20💙): New (simulated) 'Control' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E20💙): Ignored 'Control' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E21💛): New 'Alt' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E21💛-C0🔺): No matching actions found for 'Alt+Control' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E22💜): New (simulated) 'Alt' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E22💜): Ignored 'Alt+Control' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E23🧡): New '†' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:464 HotKeys (GLOBAL-E23🧡-C0🔺): Found action that matches 'Alt+Control+†': itemSearch. Calling handler . . .
App.js:62 openSearchDialog // Search dialog correctly opens again after clearing the key history
GlobalKeyEventStrategy.js:254 HotKeys (GLOBAL-C0🔺): Global component 0 updated.
GlobalKeyEventStrategy.js:671 HotKeys (GLOBAL-E23🧡-C0🔺): Stopping further event propagation.
GlobalKeyEventStrategy.js:663 HotKeys (GLOBAL-E23🧡): Searching no further, as handler has been found (and called).
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E24❤️): New '†' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E24❤️): Ignored 'Alt+Control+†' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E25💚): New '†' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E25💚): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E26💙): New 'Control' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E26💙): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E27💛): New 'Alt' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E27💛): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E28💜): New 'Control' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E28💜-C0🔺): No matching actions found for 'Control' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E29🧡): New (simulated) 'Control' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E29🧡): Ignored 'Control' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E30❤️): New 'Alt' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E30❤️-C0🔺): No matching actions found for 'Alt+Control' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E31💚): New (simulated) 'Alt' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E31💚): Ignored 'Alt+Control' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E32💙): New '†' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E32💙-C0🔺): No matching actions found for 'Alt+Control+†' keydown. // This is a bug - an action should have been found for this combination
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E33💛): New '†' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E33💛): Ignored 'Alt+Control+†' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E34💜): New '†' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E34💜): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E35🧡): New 'Control' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E35🧡): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E36❤️): New 'Alt' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E36❤️): Ignored 'Alt+Control+†' keyup because it doesn't have any keyup handlers.
KeyEventManager.js:183 HotKeys: Window focused - clearing key history

What Configuration options are you using?

configure({
  ignoreTags: [],
  logLevel: 'verbose'
})

However, it's worth noting that in chrome I've tested both with and without ignoreTags, and the error exists in both cases.

Sep 13 '19 17:09 zjullion

Thanks for the great write-up of this issue, @zjullion.

Does the same problem happen for a key combination that doesn't include alt?

Oct 20 '19 13:10 greena13

Thanks for replying - it seems to affect all key combinations, not just combinations that include alt. I tried with both a+s+d+f and shift+k - both work fine when no sequence is present, but fail when I add the konami code.

Oct 23 '19 22:10 zjullion

Hi there!

We are having same situation here.

We would like to bind hotkeys a then <1-5> but when I pass it as sequence: 'a 1' most of our hotkey handlers will stop working after first execution.

Here are the keyMap definitions:

export const SHOW_HOTKEY_INFO = {
  name: 'SHOW_HOTKEY_INFO',
  group: 'general',
  sequence: 'shift+?',
};

export const CREATE_NEW_MAIL = {
  name: 'CREATE_NEW_MAIL',
  group: 'general',
  sequence: 'c',
};
export const CREATE_NEW_NOTE = {
  name: 'CREATE_NEW_NOTE',
  group: 'general',
  sequence: 'v',
};
export const CREATE_NEW_TASKLIST = {
  name: 'CREATE_NEW_TASKLIST',
  group: 'general',
  sequence: 'b',
};

export const OPEN_APP_CALENDAR = {
  name: 'APP_SWITCH_CALENDAR',
  group: 'applications',
  sequence: 'a 2',
};
export const OPEN_APP_CONTACTS = {
  name: 'APP_SWITCH_CONTACTS',
  group: 'applications',
  sequence: 'a 3',
};
export const OPEN_APP_STORAGE = {
  name: 'APP_SWITCH_STORAGE',
  group: 'applications',
  sequence: 'a 4',
};
export const OPEN_APP_CONSOLE = {
  name: 'APP_SWITCH_CONSOLE',
  group: 'applications',
  sequence: 'a 5',
};

Also worth noting that mapping on the '?' sequence is not working only if you pass as 'shift+?'

Nov 14 '19 15:11 dannystyleart

react-hotkeys react-hotkeys copied to clipboard

[BUG] Sequences in keyMap prevent combinations from working

react-hotkeys
react-hotkeys copied to clipboard