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] Autofocus input + simple up/down arrow key works only once #285

Open piotrkochan opened 4 years ago

piotrkochan commented 4 years ago

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):

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 commented 4 years ago

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

Grantlyk commented 3 years ago

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