[Bug]: Chrome autocomplete shows over DatePicker - Githubissues

carbon-design-system / carbon

A design system built by IBM

https://www.carbondesignsystem.com

Apache License 2.0

7.81k stars 1.8k forks source link

[Bug]: Chrome autocomplete shows over DatePicker #12602

Open lee-chase opened 1 year ago

lee-chase commented 1 year ago

Package

@carbon/react

Browser

Chrome

Package version

1.16.0

React version

17

Description

Chrome input (text) autocomplete obscures the DatePicker.

Pressing escape dismisses it. This also means that escape needs to be pressed twice to dismiss the date picker.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Reproduction/example

https://deploy-preview-12601--carbon-components-react.netlify.app/?path=/story/components-datepicker--single-with-calendar&globals=theme:g10

Steps to reproduce

This happens to me in the Carbon Storybook.

The popup appears to be dependent on the entry field being empty. Different lists are presented, which I presume are based on the element id.

Adding autocomplete="off" to the input field .flatpickr-input removes this overlay.

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems

theetrain commented 1 year ago

Usability research should provide a definitive answer, though perhaps this consideration should work out in lieu:

When the DatePicker is present, we can have the component set autocomplete="off" for the input. Developers can opt in to autocomplete="on" or a related option
When the DatePicker is not present, default autocomplete behaviour may occur