fix(utils): fix focus behavior for textareas and buttons in popovers

Author: brandyscarney

core/src/components/textarea/textarea.tsx

@@ -461,6 +461,13 @@ export class Textarea implements ComponentInterface {
     this.originalIonInput = this.ionInput;
     this.updateElementInternals();
     this.runAutoGrow();
+
+    // Override focus() to delegate to the native textarea.
+    // This is needed for Safari which doesn't properly delegate
+    // focus when calling focus() directly on the host.
+    this.el.focus = () => {
+      this.setFocus();
+    };
   }
 
   componentDidRender() {

core/src/utils/focus-trap.ts

@@ -13,7 +13,7 @@ import { focusVisibleElement } from '@utils/helpers';
  * valid usage for the disabled property on ion-button.
  */
 export const focusableQueryString =
-  '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+  '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 
 /**
  * Focuses the first descendant in a context
@@ -74,7 +74,18 @@ const focusElementInContext = <T extends HTMLElement>(
   const shadowRoot = hostToFocus?.shadowRoot;
   if (shadowRoot) {
     // If there are no inner focusable elements, just focus the host element.
-    elementToFocus = shadowRoot.querySelector<HTMLElement>(focusableQueryString) || hostToFocus;
+    const innerFocusable = shadowRoot.querySelector<HTMLElement>(focusableQueryString);
+
+    // If the host has a setFocus() method, use it to delegate focus properly.
+    // This is needed for shadow DOM components like ion-textarea that override
+    // focus() to delegate to their inner native elements.
+    const hasSetFocus = typeof (hostToFocus as any).setFocus === 'function';
+    if (innerFocusable && hasSetFocus) {
+      // Keep the host element so we can call setFocus() on it
+      elementToFocus = hostToFocus;
+    } else {
+      elementToFocus = innerFocusable || hostToFocus;
+    }
   }
 
   if (elementToFocus) {

core/src/utils/helpers.ts

@@ -252,10 +252,26 @@ export const focusVisibleElement = (el: HTMLElement) => {
    * however, there are times when we need to manually control
    * this behavior so we call the `setFocus` method on ion-app
    * which will let us explicitly set the elements to focus.
+   *
+   * Note: The element passed to this function might be an inner
+   * focusable element (e.g., a native <button> inside ion-button's
+   * shadow root). If so, we need to find the host element that has
+   * the ion-focusable class to pass to setFocus.
    */
-  if (el.classList.contains('ion-focusable')) {
+  let elToFocus = el;
+
+  // If the element doesn't have ion-focusable, check if it's inside
+  // a shadow root and use the host element instead
+  if (!el.classList.contains('ion-focusable')) {
+    const rootNode = el.getRootNode();
+    if (rootNode instanceof ShadowRoot && rootNode.host instanceof HTMLElement) {
+      elToFocus = rootNode.host;
+    }
+  }
+
+  if (elToFocus.classList.contains('ion-focusable')) {
     const appRootSelector: string = config.get('appRootSelector', 'ion-app');
-    const app = el.closest(appRootSelector) as HTMLIonAppElement | null;
+    const app = elToFocus.closest(appRootSelector) as HTMLIonAppElement | null;
     if (app) {
       if (appRootSelector === 'ion-app') {
         /**
@@ -264,7 +280,7 @@ export const focusVisibleElement = (el: HTMLElement) => {
          * focus-visible utility is attached to the app root
          * and will handle setting focus on the correct element.
          */
-        app.setFocus([el]);
+        app.setFocus([elToFocus]);
       } else {
         /**
          * When using a custom app root selector, the focus-visible
@@ -280,7 +296,7 @@ export const focusVisibleElement = (el: HTMLElement) => {
            * The focus-visible utility is used to set focus on an
            * element that uses `ion-focusable`.
            */
-          focusElements([el]);
+          focusElements([elToFocus]);
         });
       }
     }