[BUG] Component does not update keymap

[Alphastrick]

Description

Variant A: getApplicationKeyMap() does not update

During mounting multiple components, each using an instance of GlobalHotKeys, I noticed, that only the hotkeys of the last component mounted show up in getApplicationKeyMap().

Variant B: GlobalHotKeys key map does not update

During mounting multiple components, each using global hotkeys, I noticed, that only the hotkeys of the first component mounted work. Instead of using the GlobalHotKeys on each component (see Variant A) I add the key-map as well as the handlers the a global component which handles the keymap (see code snipped). Now, after the application is started, only keystrokes of the first component mounted are registered eventhough all keys should be attached properly, since getApplicationKeyMap() does show all hotkeys.

Component used

GlobalHotKeys with a single mounting point (Application; single react component) and / or multiple instances of GlobalHotKeys

Expected behavior

Updated keymap getApplicationKeyMap() if multiple instances of GlobalHotKeys are used or GlobalHotKeys keyMap if a single instance is used.

Platform (please complete the following information):

• Version of react-hotkeys: 2.0.0
• Browser: firefox
• OS: Window 10

Code Snipped

class Application extends React.Component {

    /*
     * This class is implemented using the singleton Pattern in order to have
     * access to components such as the hotkey handler
     */

    private keyMap : { [key: string]: KeySequence } = {};
    private keyHandler : { [key: string]: (keyEvent: KeyboardEvent | undefined) => void } = {};

    /**
     * Add multiple hotkeys at once
     * @param keymap Keymap
     * @param handlers Handlers
     */
    addHotkeys(keymap: { [key: string]: KeySequence }, handlers: { [key: string]: (keyEvent: KeyboardEvent | undefined) => void }) {
        Object.keys(keymap).forEach((key) => {
            this.addHotkey(key, keymap[key], handlers[key]);
        });
    }

    /**
     * Add global hotkey
     * @param identifier Hotkey identifier
     * @param key_options react-hotkeys KeySequence
     * @param callback Callback
     */
    addHotkey(identifier: string, key_options : KeySequence, callback: (keyEvent : KeyboardEvent | undefined) => void) {
        this.keyMap[identifier] = key_options;
        this.keyHandler[identifier] = (keyEvent) => { console.log(keyEvent); callback(keyEvent); };
    }

    /**
     * React Render
     */
    render() {
        return (
            <>
                <GlobalHotKeys keyMap={this.key_map} handlers={this.key_handler}/>
                {/* .... */}
            </>
        );
    }

}

[dangrabcad]

Your "variant B" just sounds like you've been confounded by this documented behaviour.

[Alphastrick]

I haven't seen that before. Thanks for pointing out.