[BUG] Combination works only once if similar sequence exists

[mativs]

Describe the bug First of all, I really like this library, is awesome thanks in advance!!

I am really not sure if this is a bug but I tried to check everything before opening this issue.

I am setting two keyamps (alt+w m, alt+i). The first one works fine but alt+i works only once. If I transform the first one into a combination instead of a sequence works fine. If I leave the browser and return (alt tab) works again once and stop working.

How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc)

GlobalHotKeys

Expected behavior I expect that the shortcut keeps working every type I press the combination.

Platform (please complete the following information):

• "react-hotkeys": "^2.0.0"
• chrome
• Linux (Elementary OS)

Example Code

I created a new create-react-app and added the minimum possible code

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { configure, GlobalHotKeys} from 'react-hotkeys';

configure({
    logLevel:'verbose',
})

const keyMap = {
  foo: 'alt+w m',
  bar: 'alt+i',
};

const handlers = {
  foo: event => console.log("foo"),
  bar: event => console.log("bar"),
};

function App() {
  return (
    <div className="App">
      <GlobalHotKeys keyMap={keyMap} handlers={handlers}/>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Are you willing and able to create a PR request to fix this issue? I am not sure if I will be able to fix this.

Include the smallest log that includes your issue:

HotKeys (GLOBAL-E0❤️-C0🔺): Registered component:
 {
    "childIds": [],
    "parentId": null,
    "keyMap": {
        "foo": "alt+w m",
        "bar": "alt+i"
    }
}
AbstractKeyEventStrategy.js:351 HotKeys (GLOBAL-E0❤️-C0🔺): Registered component mount:
 {
    "childIds": [],
    "parentId": null,
    "keyMap": {
        "foo": "alt+w m",
        "bar": "alt+i"
    }
}
GlobalKeyEventStrategy.js:303 HotKeys (GLOBAL-C0🔺): Bound handler handleGlobalKeyDown() to document.onkeydown()
GlobalKeyEventStrategy.js:303 HotKeys (GLOBAL-C0🔺): Bound handler handleGlobalKeyPress() to document.onkeypress()
GlobalKeyEventStrategy.js:303 HotKeys (GLOBAL-C0🔺): Bound handler handleGlobalKeyUp() to document.onkeyup()
GlobalKeyEventStrategy.js:213 HotKeys (GLOBAL-C0🔺): Mounted.
GlobalKeyEventStrategy.js:216 HotKeys (GLOBAL-C0🔺): Component options: 
 {
    "actions": {
        "foo": [
            {
                "prefix": "Alt+w",
                "actionName": "foo",
                "sequenceLength": 2,
                "id": "m",
                "keyDictionary": {
                    "m": true
                },
                "keyEventType": 0,
                "size": 1
            }
        ],
        "bar": [
            {
                "prefix": "",
                "actionName": "bar",
                "sequenceLength": 1,
                "id": "Alt+i",
                "keyDictionary": {
                    "Alt": true,
                    "i": true
                },
                "keyEventType": 0,
                "size": 2
            }
        ]
    },
    "handlers": {
        "foo": "event => console.log(\"foo\")",
        "bar": "event => console.log(\"bar\")"
    },
    "componentId": 0,
    "options": {
        "defaultKeyEvent": "keydown"
    }
}
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E1💚): New 'Alt' keydown event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:596 HotKeys (GLOBAL-E1💚): Added 'Alt' to current combination: 'Alt'.
GlobalKeyEventStrategy.js:599 HotKeys (GLOBAL-E1💚): Key history: [
    {
        "keys": {
            "Alt": [
                [
                    0,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    0
                ]
            ]
        },
        "ids": [
            "Alt"
        ],
        "keyAliases": {}
    }
].
GlobalKeyEventStrategy.js:650 HotKeys (GLOBAL-E1💚): Attempting to find action matching 'Alt' keydown . . .
AbstractKeyEventStrategy.js:451 HotKeys (GLOBAL-E1💚-C0🔺): Internal key mapping:
 {
    "Alt+w": {
        "actionConfigs": {
            "m": {
                "prefix": "Alt+w",
                "sequenceLength": 2,
                "id": "m",
                "keyDictionary": {
                    "m": true
                },
                "size": 1,
                "events": {
                    "0": {
                        "actionName": "foo",
                        "handler": "event => console.log(\"foo\")"
                    }
                }
            }
        },
        "order": null
    },
    "": {
        "actionConfigs": {
            "Alt+i": {
                "prefix": "",
                "sequenceLength": 1,
                "id": "Alt+i",
                "keyDictionary": {
                    "Alt": true,
                    "i": true
                },
                "size": 2,
                "events": {
                    "0": {
                        "actionName": "bar",
                        "handler": "event => console.log(\"bar\")"
                    }
                }
            }
        },
        "order": null
    }
}
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E1💚-C0🔺): No matching actions found for 'Alt' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E2💙): New (simulated) 'Alt' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:599 HotKeys (GLOBAL-E2💙): Key history: [
    {
        "keys": {
            "Alt": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    2,
                    0
                ]
            ]
        },
        "ids": [
            "Alt"
        ],
        "keyAliases": {}
    }
].
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E2💙): Ignored 'Alt' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E3💛): New 'i' keydown event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:596 HotKeys (GLOBAL-E3💛): Added 'i' to current combination: 'Alt+i'.
GlobalKeyEventStrategy.js:599 HotKeys (GLOBAL-E3💛): Key history: [
    {
        "keys": {
            "Alt": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    2,
                    0
                ]
            ],
            "i": [
                [
                    0,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    0
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    }
].
GlobalKeyEventStrategy.js:650 HotKeys (GLOBAL-E3💛): Attempting to find action matching 'Alt+i' keydown . . .
AbstractKeyEventStrategy.js:451 HotKeys (GLOBAL-E3💛-C0🔺): Internal key mapping:
 {
    "Alt+w": {
        "actionConfigs": {
            "m": {
                "prefix": "Alt+w",
                "sequenceLength": 2,
                "id": "m",
                "keyDictionary": {
                    "m": true
                },
                "size": 1,
                "events": {
                    "0": {
                        "actionName": "foo",
                        "handler": "event => console.log(\"foo\")"
                    }
                }
            }
        },
        "order": null
    },
    "": {
        "actionConfigs": {
            "Alt+i": {
                "prefix": "",
                "sequenceLength": 1,
                "id": "Alt+i",
                "keyDictionary": {
                    "Alt": true,
                    "i": true
                },
                "size": 2,
                "events": {
                    "0": {
                        "actionName": "bar",
                        "handler": "event => console.log(\"bar\")"
                    }
                }
            }
        },
        "order": [
            "Alt+i"
        ]
    }
}
AbstractKeyEventStrategy.js:464 HotKeys (GLOBAL-E3💛-C0🔺): Found action that matches 'Alt+i': bar. Calling handler . . .
App.js:17 bar
GlobalKeyEventStrategy.js:671 HotKeys (GLOBAL-E3💛-C0🔺): Stopping further event propagation.
GlobalKeyEventStrategy.js:663 HotKeys (GLOBAL-E3💛): Searching no further, as handler has been found (and called).
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E4💜): New 'i' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:599 HotKeys (GLOBAL-E4💜): Key history: [
    {
        "keys": {
            "Alt": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    2,
                    0
                ]
            ],
            "i": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    1
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    }
].
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E4💜): Ignored 'Alt+i' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E5🧡): New 'Alt' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:599 HotKeys (GLOBAL-E5🧡): Key history: [
    {
        "keys": {
            "Alt": [
                [
                    1,
                    2,
                    0
                ],
                [
                    1,
                    2,
                    1
                ]
            ],
            "i": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    1
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    }
].
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E5🧡): Ignored 'Alt+i' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E6❤️): New 'Alt' keydown event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:587 HotKeys (GLOBAL-E6❤️): Started a new combination with 'Alt'.
GlobalKeyEventStrategy.js:588 HotKeys (GLOBAL-E6❤️): Key history: [
    {
        "keys": {
            "Alt": [
                [
                    1,
                    2,
                    0
                ],
                [
                    1,
                    2,
                    1
                ]
            ],
            "i": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    1
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    },
    {
        "keys": {
            "Alt": [
                [
                    0,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    0
                ]
            ]
        },
        "ids": [
            "Alt"
        ],
        "keyAliases": {}
    }
].
GlobalKeyEventStrategy.js:650 HotKeys (GLOBAL-E6❤️): Attempting to find action matching 'Alt' keydown . . .
AbstractKeyEventStrategy.js:451 HotKeys (GLOBAL-E6❤️-C0🔺): Internal key mapping:
 {
    "Alt+w": {
        "actionConfigs": {
            "m": {
                "prefix": "Alt+w",
                "sequenceLength": 2,
                "id": "m",
                "keyDictionary": {
                    "m": true
                },
                "size": 1,
                "events": {
                    "0": {
                        "actionName": "foo",
                        "handler": "event => console.log(\"foo\")"
                    }
                }
            }
        },
        "order": null
    },
    "": {
        "actionConfigs": {
            "Alt+i": {
                "prefix": "",
                "sequenceLength": 1,
                "id": "Alt+i",
                "keyDictionary": {
                    "Alt": true,
                    "i": true
                },
                "size": 2,
                "events": {
                    "0": {
                        "actionName": "bar",
                        "handler": "event => console.log(\"bar\")"
                    }
                }
            }
        },
        "order": [
            "Alt+i"
        ]
    }
}
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E6❤️-C0🔺): No matching actions found for 'Alt' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E7💚): New (simulated) 'Alt' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:599 HotKeys (GLOBAL-E7💚): Key history: [
    {
        "keys": {
            "Alt": [
                [
                    1,
                    2,
                    0
                ],
                [
                    1,
                    2,
                    1
                ]
            ],
            "i": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    1
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    },
    {
        "keys": {
            "Alt": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    2,
                    0
                ]
            ]
        },
        "ids": [
            "Alt"
        ],
        "keyAliases": {}
    }
].
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E7💚): Ignored 'Alt' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E8💙): New 'i' keydown event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:596 HotKeys (GLOBAL-E8💙): Added 'i' to current combination: 'Alt+i'.
GlobalKeyEventStrategy.js:599 HotKeys (GLOBAL-E8💙): Key history: [
    {
        "keys": {
            "Alt": [
                [
                    1,
                    2,
                    0
                ],
                [
                    1,
                    2,
                    1
                ]
            ],
            "i": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    1
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    },
    {
        "keys": {
            "Alt": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    2,
                    0
                ]
            ],
            "i": [
                [
                    0,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    0
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    }
].
GlobalKeyEventStrategy.js:650 HotKeys (GLOBAL-E8💙): Attempting to find action matching 'Alt+i' keydown . . .
AbstractKeyEventStrategy.js:451 HotKeys (GLOBAL-E8💙-C0🔺): Internal key mapping:
 {
    "Alt+w": {
        "actionConfigs": {
            "m": {
                "prefix": "Alt+w",
                "sequenceLength": 2,
                "id": "m",
                "keyDictionary": {
                    "m": true
                },
                "size": 1,
                "events": {
                    "0": {
                        "actionName": "foo",
                        "handler": "event => console.log(\"foo\")"
                    }
                }
            }
        },
        "order": null
    },
    "": {
        "actionConfigs": {
            "Alt+i": {
                "prefix": "",
                "sequenceLength": 1,
                "id": "Alt+i",
                "keyDictionary": {
                    "Alt": true,
                    "i": true
                },
                "size": 2,
                "events": {
                    "0": {
                        "actionName": "bar",
                        "handler": "event => console.log(\"bar\")"
                    }
                }
            }
        },
        "order": [
            "Alt+i"
        ]
    }
}
AbstractKeyEventStrategy.js:475 HotKeys (GLOBAL-E8💙-C0🔺): No matching actions found for 'Alt+i' keydown.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E9💛): New 'i' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:599 HotKeys (GLOBAL-E9💛): Key history: [
    {
        "keys": {
            "Alt": [
                [
                    1,
                    2,
                    0
                ],
                [
                    1,
                    2,
                    1
                ]
            ],
            "i": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    1
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    },
    {
        "keys": {
            "Alt": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    2,
                    0
                ]
            ],
            "i": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    1
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    }
].
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E9💛): Ignored 'Alt+i' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:403 HotKeys (GLOBAL-E10💜): New 'Alt' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:599 HotKeys (GLOBAL-E10💜): Key history: [
    {
        "keys": {
            "Alt": [
                [
                    1,
                    2,
                    0
                ],
                [
                    1,
                    2,
                    1
                ]
            ],
            "i": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    1
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    },
    {
        "keys": {
            "Alt": [
                [
                    1,
                    2,
                    0
                ],
                [
                    1,
                    2,
                    1
                ]
            ],
            "i": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    0,
                    1
                ]
            ]
        },
        "ids": [
            "Alt+i",
            "Alt+ˆ"
        ],
        "keyAliases": {
            "ˆ": "i"
        }
    }
].
GlobalKeyEventStrategy.js:640 HotKeys (GLOBAL-E10💜): Ignored 'Alt+i' keyup because it doesn't have any keyup handlers.

Let me know If you need more information or anything, and sorry for my typos english is not my native language.

Thanks again

[JoiGud]

I think I had/have a similar bug. Event only firing once and then no more.

This only happens when the keyMap is a single key, or multiple with + operator between. I'm using the <GlobalHotKeys> element.

When I have multiple <GlobalHotKeys> but each with just a single keyMap and corresponding handler then this seems to work... ¯_(ツ)_/¯

So instead of doing:

const keyMap = {
   CLOSE: ["s"],
   OPEN: ["g+p"]
}
const handlers = {
   CLOSE: () => { console.log('close') }
   OPEN: () => { console.log('open') }
}

<GlobalHotKeys keyMap={keyMap} handlers={handlers} />
```
you would do
```
<GlobalHotKeys 
   keyMap={{
      CLOSE: ["s"]
   }} 
   handlers={
      CLOSE: () => { console.log('close') }
   } 
/>
<GlobalHotKeys 
   keyMap={{
      OPEN: ["g+p"]
   }} 
   handlers={
      OPEN: () => { console.log('open') }
   } 
/>
```
   
 I'm working on Mac OS and using Chrome (tried other browsers in MacOS but all behaved the same).

Hope this helps!

[dobrynin]

+1 experiencing this behavior. @JoiGud your solution worked. Thanks!

[greena13]

Thanks for the great write-up, @mativs. This looks like it's a complicated one and I'm running out of time I have available to work on this library today, so this will need looking into further.

[mativs]

@greena13 thanks for the answer. Let me know if I can help in any way.

[Nantris]

I'm seeing this issue as well, it only seems to affect hotkeys incorporating alt in my experience so far. I've got a bunch of other hotkeys, but these new ones I'm trying to add to listen to only the alt key will only fire once.

const hotkeyMapA = {
  altDownListener: { sequence: 'alt', action: 'keydown' },  //  Fires only once
  altUpListener: { sequence: 'alt', action: 'keyup' },  //  Will never fire under any circumstance
};

const hotkeyMapB = {
  altUpListener: 'alt', //  Fires only once, then document.activeElement seemingly must change before it fires again
};

[logan-markewich]

I'll just bump this and say I'm also seeing the same problem.

The workaround that involves using a new element for each single keymap is pretty annoying, if anyone has a better solution I'd love to hear it :)

[devinhalladay]

This solved it for me https://github.com/greena13/react-hotkeys/issues/209#issuecomment-539593307:

Adding either of these worked around this issue for me:

• configure({ simulateMissingKeyPressEvents: false });
• configure({ ignoreKeymapAndHandlerChangesByDefault: false });

[Nantris]

It's worth noting that using ignoreKeymapAndHandlerChangesByDefault will disable a major optimization. I'm not really sure how simulateMissingKeyPressEvents works but I've avoided using it to prevent possibly making new bugs for ourselves somewhere else.