search

t1m0n / air-datepicker

Lightweight, dependency-free JavaScript datepicker.
https://air-datepicker.com
MIT License
2.58k stars 1.36k forks source link

Fix bug with keyboard navigation #616

Open il97mur opened 1 month ago

il97mur commented 1 month ago

This PR fixes the bug in datepicker keyboard navigation.

The sandbox link: https://codesandbox.io/p/sandbox/sweet-pine-pwmcnk

Steps to reproduce:

  1. Set focus into the datepicker input.
  2. Navigate to previous focusable element with "shift + tab".
  3. Return focus to the input.
  4. Try to use arrows to navigate between cells. The datepicker will change years instead of navigating between cells.

The reason of described behaviour is that the "shift" key still in the pressedKeys set when datepicker input loses focus (by pressing shift+tab) because the keyup event with "shift" key will be fired after the input will lose the focus and onKeyUp input handler will be not fired.

The solution:

  1. Add blur event listener on input on keyboard navigation initialization.
  2. Input blur event handler will clear the pressedKeys set.
vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
air-datepicker ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 30, 2024 6:16am