greena13 / react-hotkeys

Declarative hotkey and focus area management for React
https://github.com/greena13/react-hotkeys
ISC License
2.15k stars 161 forks source link

[BUG] key mapping disappears from getApplicationKeyMap result #264

Open vhermecz opened 4 years ago

vhermecz commented 4 years ago

Describe the bug

I have globalhotkeys and one hotkeys component (for a list) on my page. A second hotkeys component in the help modal. The first time the help about keymap appears, I have all hotkeys listed from global and the list hotkeys. But every attempt after the first one misses to render the list hotkeys.

From the logs, and after some debugging, I can see, that when the help is displayed, the escape hotkey for the help modal is registered with the FocusOnlyEventStrategy. Once the modal is closed, this gets deregistered (with componentId=1), and as the rootComponentId === 1, latter one gets set to null. Eventhough, the ComponentTree still contains the List HotKeys keymap with id===0, as rootComponentId===null now, the next call to getApplicationKeyMap returns empty.

How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc) There is one GlobalHotKeys and two HotKeys tags. Roughly like this:

<GlobalHotKeys ... />
<Help open={this.state.helpIsOpen} toggle={this.toggleHelp}/>
<HotKey ...><List ... /></HotKey>

Help contains a HotKey inside defining ESCAPE to close the dialog. The HotKey around List defines PGDOWN, PGUP, UP, DOWN for moving in the list.

Expected behavior The List HotKeys should still be rendered.

Platform (please complete the following information):

Are you willing and able to create a PR request to fix this issue? tldr: Nope. I don't understand the esosystem enough to make the change. IDK what is the expected behaviour of the related objects.

Include the smallest log that includes your issue:

Filtered only for the string register

HotKeys (GLOBAL-E0❀️-C0πŸ”Ί): Registered component:
 {
    "childIds": [],
    "parentId": null,
    "keyMap": {
        "SHOW_DIALOG": {
            "name": "Display keyboard shortcuts",
            "sequence": "shift+?",
            "action": "keyup"
        }
    }
}
AbstractKeyEventStrategy.js:321 HotKeys (F0πŸ“•-E0❀️-C0πŸ”Ί) Registered component:
 {
    "childIds": [],
    "parentId": null,
    "keyMap": {
        "PREV_ITEM": {
            "name": "Move to previous item",
            "sequence": "up"
        },
        "NEXT_ITEM": {
            "name": "Move to next item",
            "sequence": "down"
        },
        "PREV_PAGE": {
            "name": "Move to previous page",
            "sequence": "pageup"
        },
        "NEXT_PAGE": {
            "name": "Move to next page",
            "sequence": "pagedown"
        }
    }
}
AbstractKeyEventStrategy.js:351 HotKeys (GLOBAL-E0❀️-C0πŸ”Ί): Registered component mount:
 {
    "childIds": [],
    "parentId": null,
    "keyMap": {
        "SHOW_DIALOG": {
            "name": "Display keyboard shortcuts",
            "sequence": "shift+?",
            "action": "keyup"
        }
    }
}
AbstractKeyEventStrategy.js:351 HotKeys (F0πŸ“•-E0❀️-C0πŸ”Ί) Registered component mount:
 {
    "childIds": [],
    "parentId": null,
    "keyMap": {
        "PREV_ITEM": {
            "name": "Move to previous item",
            "sequence": "up"
        },
        "NEXT_ITEM": {
            "name": "Move to next item",
            "sequence": "down"
        },
        "PREV_PAGE": {
            "name": "Move to previous page",
            "sequence": "pageup"
        },
        "NEXT_PAGE": {
            "name": "Move to next page",
            "sequence": "pagedown"
        }
    }
}
AbstractKeyEventStrategy.js:321 HotKeys (F0πŸ“•-E12❀️-C1⭐️) Registered component:
 {
    "childIds": [],
    "parentId": null,
    "keyMap": {
        "CLOSE_DIALOG": "Escape"
    }
}
AbstractKeyEventStrategy.js:351 HotKeys (F1πŸ“—-E12❀️-C1⭐️-P0πŸ”Ί:) Registered component mount:
 {
    "childIds": [],
    "parentId": null,
    "keyMap": {
        "CLOSE_DIALOG": "Escape"
    }
}
AbstractKeyEventStrategy.js:364 HotKeys (F1πŸ“—-E13πŸ’š-C1⭐️-P0πŸ”Ί:) De-registered component. Remaining component Registry:
 {
    "0": {
        "childIds": [],
        "parentId": null,
        "keyMap": {
            "PREV_ITEM": {
                "name": "Move to previous item",
                "sequence": "up"
            },
            "NEXT_ITEM": {
                "name": "Move to next item",
                "sequence": "down"
            },
            "PREV_PAGE": {
                "name": "Move to previous page",
                "sequence": "pageup"
            },
            "NEXT_PAGE": {
                "name": "Move to next page",
                "sequence": "pagedown"
            }
        }
    }
}
AbstractKeyEventStrategy.js:321 HotKeys (F1πŸ“—-E22πŸ’œ-C2πŸ”·) Registered component:
 {
    "childIds": [],
    "parentId": null,
    "keyMap": {
        "CLOSE_DIALOG": "Escape"
    }
}
AbstractKeyEventStrategy.js:351 HotKeys (F2πŸ“˜-E22πŸ’œ-C2πŸ”·-P0πŸ”Ί:) Registered component mount:
 {
    "childIds": [],
    "parentId": null,
    "keyMap": {
        "CLOSE_DIALOG": "Escape"
    }
}
AbstractKeyEventStrategy.js:364 HotKeys (F2πŸ“˜-E23🧑-C2πŸ”·-P0πŸ”Ί:) De-registered component. Remaining component Registry:
 {
    "0": {
        "childIds": [],
        "parentId": null,
        "keyMap": {
            "PREV_ITEM": {
                "name": "Move to previous item",
                "sequence": "up"
            },
            "NEXT_ITEM": {
                "name": "Move to next item",
                "sequence": "down"
            },
            "PREV_PAGE": {
                "name": "Move to previous page",
                "sequence": "pageup"
            },
            "NEXT_PAGE": {
                "name": "Move to next page",
                "sequence": "pagedown"
            }
        }
    }
}

What Configuration options are you using?

configure({
    logLevel: 'verbose',
});