appendTo set to body breaks arrow keys on all unrelated input fields
See original GitHub issueMinimal issue for reproduction: https://stackblitz.com/edit/typescript-y8kult
Your Environment
- flatpickr version used: 4.6.9
- Browser name and version: Current Chrome/FF, version does not matter.
Steps to reproduce
- Set
appendTo
to any outer container such as body - Have another input field on the page
- Try to use the arrow keys on that unrelated field
Arrow key usage will be blocked on the unrelated field, even though it is not related to the flatpickr input nor is flatpickr opened.
This is due to the keydown
listener working on body and the isCalendarElem
function checking simply for a node contains in https://github.com/flatpickr/flatpickr/blob/d4fb3a84e22de095c46a70e63e60a44c8f25eb73/src/index.ts#L1649. In turn, this causes all keydown keyCodes to receive preventDefault
and thus breaking their normal operation.
This is likely fixed by https://github.com/flatpickr/flatpickr/pull/2329
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
appendTo set to body breaks arrow keys on all unrelated input fields ...
Arrow key usage will be blocked on the unrelated field, even though it is not related to the flatpickr input nor is flatpickr...
Read more >When allowInput=true and appendTo, left & right arrow keys ...
Hi,. When I set allowInput to true, I can't use left & right arrows anymore, in order to edit the text field.
Read more >How to detect arrow keys using JavaScript on iPad with ...
Using this test HTML and JavaScript, touch the input field to give it focus. Using the arrow keys nothing happens, but type letters...
Read more >HTML Standard
HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as...
Read more >Arrow keys don't work in text input elements ... - jQWidgets
However, when I display a standard 'input' type element, the arrow keys (and home, end keys) do not work in the input field....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@oliverguenther yes, this week for sure
For anyone needing a workaround for this fix, my colleague @aleixsuau found out that removing
appendTo=body
has the same effect but does not trigger this bug.