Multiple Switch components keep focus state in Safari

[tyanthony]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

In Safari browser, when there are multiple switch components in a form, each maintains its focus state until it is interacted with again directly.

Ex:

Expected Behavior

The switch should lose focus when another element, other than itself, is clicked or interacted with.

Reproduction Sample

https://codepen.io/tyleranthony/pen/PoLpZWy?editors=100

Reproduction Steps

1. Open an environment in Safari browser
2. Add multiple switch components
3. Toggle multiple of them
4. Notice that they maintain their focus state

Reproduction Version

2.1.0

Relevant Info

Browser: Safari

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Mission

[driskull]

Seems like the focus selector should be moved from the host to the container div maybe?

[macandcheese]

Seems like the focus selector should be moved from the host to the container div maybe?

Yeah - you can focus either the host, the container, or both, depending on how you focus:

[github-actions[bot]]

Installed and assigned for verification.