Two calendar icons are displayed for a date input in Firefox

[grahamford]

Describe the bug

A date input control in Firefox displays a native browser calendar icon in addition to the cds-icon.

(Only a single cds-icon is displayed in Safari and Chrome.)

How to reproduce

View the Storybook page in Firefox https://storybook.core.clarity.design/?path=/story/forms-date--page

Expected behavior

A single calendar icon is displayed in all browsers.

Versions

Clarity project:

• [x] Clarity Core
• [ ] Clarity Angular/UI

Clarity version:

• [ ] v5.x
• [x] v6.x

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version:

Angular 15

Device:

• Type: MacBook
• OS: Ventura 13.2
• Browser: Firefox
• Version: 109

[Jinnie]

It's a regression caused by Firefox breaking change. It was fine when I tested it with 107.0.1 and then I reproduced it in 109.0.1, after I updated my browser. We have to check how to suppress the default icon.

[Jinnie]

It's actually the whole native selector that needs to be prevented. It seems it does not respect the ::-webkit-calendar-picker-indicator pseudo selector anymore.

[grahamford]

There doesn't seem to have been any change in Firefox according to this bug report https://bugzilla.mozilla.org/show_bug.cgi?id=1812397

Does anyone have a good workaround?