[BUG] Autofocus input + simple up/down arrow key works only once

[piotrkochan]

Describe the bug

I have a simple <HotKeys> with ArrowKeys up/down events declared around with autofocus attribute. Everything lives in modal.

When modal is rendered and I press up or down arrow then event is emitted only once and works again after re-focus but then only once too.

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

    const keyMap = {
        PREV_ELEM: ['ArrowUp'],
        NEXT_ELEM: ['ArrowDown'],
    };

    const handlers = {
        PREV_ELEM: () => {
            console.log('up');
        },
        NEXT_ELEM: () => {
            console.log('down', results.length);
        }
    }

    return <Modal open={visible} ...>
        <Modal.Content>
            <HotKeys keyMap={keyMap} handlers={handlers}>
                <Input onChange={e => onType(e.target.value)} autoFocus/>
            </HotKeys>
        </Modal.Content>
    </Modal>;

Expected behavior Modal shows up, input is focused and up/down arrows events are handled.

Platform (please complete the following information):

• Version of react-hotkeys: 2.0.0
• Browser: Chrome
• OS: Win10

Are you willing and able to create a PR request to fix this issue? No

Include the smallest log that includes your issue:

HotKeys (F10📘-C2🔷-P0🔺:) Focused. 

GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E199💚): New 'ArrowDown' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:429 HotKeys (GLOBAL-E199💚-C0🔺): No matching actions found for 'ArrowDown' keydown.
GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E200💙): New (simulated) 'ArrowDown' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:547 HotKeys (GLOBAL-E200💙): Ignored 'ArrowDown' keypress because it doesn't have any keypress handlers.
FocusOnlyKeyEventStrategy.js:298 HotKeys (F10📘-E201💛-C2🔷-P0🔺:) New 'ArrowDown' keydown event.
AbstractKeyEventStrategy.js:418 HotKeys (F10📘-E201💛-C0🔺) Found action that matches 'ArrowDown': NEXT_ELEM. Calling handler . . .
index.js:25 down
FocusOnlyKeyEventStrategy.js:508 HotKeys (F10📘-E201💛-C0🔺) Stopping further event propagation.
GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E202💜): New 'ArrowDown' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:547 HotKeys (GLOBAL-E202💜): Ignored 'ArrowDown' keyup because it doesn't have any keyup handlers.
FocusOnlyKeyEventStrategy.js:400 HotKeys (F10📘-E202💜-C2🔷-P0🔺:) Ignored 'ArrowDown' keyup as it was not expected, and has already been simulated.
EventPropagator.js:252 HotKeys (F10📘-E202💜-Cnull🔺) Stopping further event propagation.
GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E203🧡): New 'ArrowDown' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:429 HotKeys (GLOBAL-E203🧡-C0🔺): No matching actions found for 'ArrowDown' keydown.
FocusOnlyKeyEventStrategy.js:298 HotKeys (F10📘-E205💚-C2🔷-P0🔺:) New (simulated) 'ArrowDown' keypress event.
GlobalKeyEventStrategy.js:305 HotKeys (GLOBAL-E205💚): Received (simulated) 'ArrowDown' keypress event (that has already passed through React app).
GlobalKeyEventStrategy.js:547 HotKeys (GLOBAL-E205💚): Ignored 'ArrowDown' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E206💙): New 'ArrowDown' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:547 HotKeys (GLOBAL-E206💙): Ignored 'ArrowDown' keyup because it doesn't have any keyup handlers.
GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E207💛): New 'ArrowUp' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:429 HotKeys (GLOBAL-E207💛-C0🔺): No matching actions found for 'ArrowUp' keydown.
GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E208💜): New (simulated) 'ArrowUp' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:547 HotKeys (GLOBAL-E208💜): Ignored 'ArrowUp' keypress because it doesn't have any keypress handlers.
GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E209🧡): New 'ArrowUp' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:547 HotKeys (GLOBAL-E209🧡): Ignored 'ArrowUp' keyup because it doesn't have any keyup handlers.
FocusOnlyKeyEventStrategy.js:220 HotKeys (F10📘-C2🔷-P0🔺:) Lost focus.
KeyEventManager.js:167 HotKeys: Window focused - clearing key history
FocusOnlyKeyEventStrategy.js:153 HotKeys (F11📙-C2🔷-P0🔺:) Focused. 

GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E210❤️): New 'ArrowUp' keydown event (that has NOT passed through React app).
AbstractKeyEventStrategy.js:429 HotKeys (GLOBAL-E210❤️-C0🔺): No matching actions found for 'ArrowUp' keydown.
GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E211💚): New (simulated) 'ArrowUp' keypress event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:547 HotKeys (GLOBAL-E211💚): Ignored 'ArrowUp' keypress because it doesn't have any keypress handlers.
FocusOnlyKeyEventStrategy.js:298 HotKeys (F11📙-E212💙-C2🔷-P0🔺:) New 'ArrowUp' keydown event.
AbstractKeyEventStrategy.js:418 HotKeys (F11📙-E212💙-C0🔺) Found action that matches 'ArrowUp': PREV_ELEM. Calling handler . . .
index.js:21 up
FocusOnlyKeyEventStrategy.js:508 HotKeys (F11📙-E212💙-C0🔺) Stopping further event propagation.
GlobalKeyEventStrategy.js:310 HotKeys (GLOBAL-E213💛): New 'ArrowUp' keyup event (that has NOT passed through React app).
GlobalKeyEventStrategy.js:547 HotKeys (GLOBAL-E213💛): Ignored 'ArrowUp' keyup because it doesn't have any keyup handlers.
FocusOnlyKeyEventStrategy.js:400 HotKeys (F11📙-E213💛-C2🔷-P0🔺:) Ignored 'ArrowUp' keyup as it was not expected, and has already been simulated.
EventPropagator.js:252 HotKeys (F11📙-E213💛-Cnull🔺) Stopping further event propagation.
FocusOnlyKeyEventStrategy.js:220 HotKeys (F11📙-C2🔷-P0🔺:) Lost focus.
KeyEventManager.js:167 HotKeys: Window focused - clearing key history

What Configuration options are you using?

configure({logLevel: 'debug', ignoreTags: ['select', 'textarea'], ignoreRepeatedEventsWhenKeyHeldDown: false});

[piotrkochan]

I don't know why but it looks that react-hotkeys loosing focus but it is really still present in the Input element

[Grantlyk]

Has there been a PR for this specific issue? i'm having similar issues