.setFocus() not working on several components in newer Chrome versions

[maxpatiiuk]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Calling .setFocus() on calcite-action-group has no effect.

Expected Behavior

If .setFocus() method on the calcite-action-group element is called, I am expecting the focus to move to first focusable element.

Reproduction Sample

https://codepen.io/maxpatiiuk/pen/wvVBQXw?editors=1010

Reproduction Steps

1. Open the codepen
2. Open console
3. See the the active element before and after the .setFocus() call remains the same

Reproduction Version

2.13

Relevant Info

The codepen works like expected in Chrome 119. Does not work in Chrome 128.

Calcite has E2E test for setFocus in calcite-action-group. Since Stencil's Puppeteer is using Chrome 119, the test is passing. Upon updating Chrome to 129, the test is failing:

calcite-design-system/packages/calcite-components/src/components/action-group/action-group.e2e.ts

Line 58 in f50c170

focusable(actionGroupHTML, { shadowFocusTargetSelector: "calcite-action" });

---

Another example:

1. On the docs page for action-bar, from the list of samples select "Action Bar with groups"
2. Open DevTools and find the calcite-action-group element rendered by the sample
3. Call .setFocus() method on that element in the devtools console.
4. In Chrome 119 that would focus the first slotted in action. In Chrome 129 this has no effect.

---

Possible solution:

Setting delegatesFocus: true for calcite-action element seems to fix this issue.
You already have it on calcite-action-group, but might need to add it to calcite-action too:

calcite-design-system/packages/calcite-components/src/components/action-group/action-group.tsx

Lines 38 to 40 in f50c170

	shadow: {
	delegatesFocus: true,
	},

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

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

Esri team

ArcGIS Maps SDK for JavaScript

[maxpatiiuk]

Also affects calcite-date-picker.setFocus()

Fixed by adding delegatesFocus:true to calcite-date-picker-month-header

[maxpatiiuk]

input-date-picker is affected too:

In Chrome 119 clicking on the arrow-right icon between the two text inputs will move focus to the first input.

In Chrome 128 that does not happen.

That causes an E2E test failure because this click no longer moves focus to the first input:

calcite-design-system/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

Line 230 in 42c1329

await input.click();

---

My workaround thus was to update the test per new behavior:

-     await input.click(); 
+     const toggleIcon = await input.find(`>>> .${CSS.toggleIcon}`);
+     await toggleIcon.click();

However, a different solution is required if you want to preserve the Chrome 119 behavior.

[maxpatiiuk]

Also affecting calcite-inline-editable - that component by default tries to do this.el.focus(), which does not appear to move focus to the slotted-in input anymore.

Calling this.inputElement?.setFocus(); instead works, but only if I add delegatesFocus:true to calcite-input (and same would have to be done for all the other inputs).

In general, it appears that delegatesFocus:true should be added to most (all?) Calcite components.

[maxpatiiuk]

Also affects <calcite-menu> test:

calcite-design-system/packages/calcite-components/src/components/menu/menu.e2e.ts

Lines 21 to 25 in aef57dd

	describe("focusable", () => {
	focusable(html`<calcite-menu><calcite-menu-item text="calcite"></calcite-menu-item></calcite-menu>`, {
	focusTargetSelector: "calcite-menu-item",
	});
	});

Fixed by adding delegatesFocus to calcite-menu-item and changing this.el.focus() in calcite-menu to this.menuItems[0]?.focus();

[jcfranco]

In general, it appears that delegatesFocus:true should be added to most (all?) Calcite components.

We should revisit our findings, but based on our earlier exploration on delegatesFocus, I wouldn't suggest enabling this by default for all components.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 3.0.0-next.7 🎉