carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.72k stars 1.79k forks source link

[Bug]: Datepicker issue with Keyboard Navigation #16991

Closed Geethkadali closed 1 month ago

Geethkadali commented 1 month ago

Package

@carbon/react

Browser

Chrome, Safari, Firefox, Edge

Package version

v1.62.0

React version

v18.3.1

Description

With keyboard navigation able to select dates but the focus is not going to the next elements , the focus is always trapping inside date picker end date

Reproduction/example

https://stackblitz.com/edit/github-pjo2fh-rm6wjm?file=src%2FApp.jsx

Steps to reproduce

Select the dates using keyboard after selection of end date press tab doesn't work (focus not going to the next element).

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

guidari commented 1 month ago

The issue only happens if there is a setState inside the onChange. You can check the examples below:

Carbon example: https://stackblitz.com/edit/github-zwyeoc?file=src%2FApp.jsx Flatpickr example: https://stackblitz.com/edit/react-flatpickr-example-not-working-zfkd25?file=src%2FApp.js

I guess this might be an issue on the Flatpickr library.