Bug - Calcite Input Type = "color" Does Not Display in Firefox

[mdebella10]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

The calcite input component with type property set to "Color" does not work in Firefox. This was reproduced on Firefox using Codepen and could not be reproduced on Chrome, Edge, or Safari. On Firefox clicking the input component brings up, what I assume to be, the browser's color picker rather than the calcite one.

Link to Codepen: https://codepen.io/mdebella/pen/azoKmYd?editors=100

Color Picker Shown in Firefox:

Expected Behavior

The calcite input component with type = color should display in Firefox instead of what is displaying right now.

Reproduction Sample

https://codepen.io/mdebella/pen/azoKmYd?editors=100

Reproduction Steps

1. Open the codepen in Firefox
2. Click the input component
3. Non esri color picker will display

Reproduction Version

2.13.2

Relevant Info

Only reproducible on Firefox

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Impact

For the upcoming release we do not want non-esri UI to show for Firefox users.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Map Viewer

[macandcheese]

I think this is working as expected. Calcite Input of type="color" will render the browser's picker - which sometimes does defer to the OS (unless you were doing something custom to display the Calcite Color Picker).

We have an open issue to add a standalone Input Color Picker component - which would launch the Calcite Color Picker: #1616