question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

appendTo set to body breaks arrow keys on all unrelated input fields

See original GitHub issue

Minimal 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:closed
  • Created 3 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
chmlncommented, Mar 1, 2021

@oliverguenther yes, this week for sure

0reactions
oliverguenthercommented, May 18, 2021

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found