See if using ShadowRoot.delegatesFocus allows us to call .focus on any focusable calcite component

[eriklharper]

Background

Focusable calcite components have been implementing a setFocus method as a recommended convention from Ionic, but the HTMLElement.focus() method would be nicer to be able to use since it is common to all HTMLElements. This issue will explore whether using ShadowRoot.delegatesFocus will allow any focusable calcite component to be able to rely on the built-in focus method.

If this works, even though this feature isn't fully supported in all the browser versions Calcite officially supports, it is likely we'll be able to implement this in addition to keeping the setFocus implementation around, at least until it is no longer needed.

https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus

Desired Outcome

Build a prototype example showcasing the ability to call focus() on a focusable calcite component using ShadowRoot.delegatesFocus.

Additional Resources

• https://developers.google.com/web/fundamentals/web-components/shadowdom#focus
• https://github.com/calebdwilliams/delegates-focus-polyfill

[benelan]

You can use focus() on component's with delegatesFocus enabled like this:

(async () => {
  await customElements.whenDefined("calcite-date-picker");
  const el = await document
    .querySelector("calcite-date-picker")
    .componentOnReady();
  requestAnimationFrame(() => el.focus());
})();

However, after #6156 it will be simplified to this when using setFocus:

 customElements
    .whenDefined("calcite-date-picker")
    .then(() => document.querySelector("calcite-date-picker").setFocus());

Not all of the components have delegatesFocus enabled right now, see #5147 (comment) for more info. But in terms of the research for this issue I think that's done and confirmed that it will work. Should we close this? @driskull @eriklharper @geospatialem

[driskull]

Yeah lets close this 👍

I still think we will keep our setFocus methods in the near future because inside of our setFocus methods we can:

• Wait for componentOnReady() since our setFocus methods are async and return promises
• Wait for requestAnimationFrame()

I think those are the only two benefits of having our own focus methods. Otherwise, as noted by @benelan, the user has to wait for componentOnReady and requestAnimationFrame()