style(esl-toggleable): fix focus behavior for chain focus flow

src/modules/esl-popup/core/esl-popup.ts

@@ -113,10 +113,11 @@ export class ESLPopup extends ESLToggleable {
   /**
    * Focus behavior. Available values:
    * - 'none' - no focus management
+   * - 'grab' - focus on the first focusable element
    * - 'chain' (default) - focus on the first focusable element first and return focus to the activator after the last focusable element
    * - 'loop' - focus on the first focusable element and loop through the focusable elements
    */
-  @attr({defaultValue: 'none'})
+  @attr({defaultValue: 'chain'})
   public override focusBehavior: FocusFlowType;
 
   public $placeholder: ESLPopupPlaceholder | null;

src/modules/esl-toggleable/core/esl-toggleable.shape.ts

@@ -22,10 +22,11 @@ export interface ESLToggleableTagShape<T extends ESLToggleable = ESLToggleable>
   /**
    * Define focus behavior
    *  - 'none' - no focus management
+   *  - 'grab' - focus on the first focusable element
    *  - 'chain' - focus on the first focusable element first and return focus to the activator after the last focusable element
    *  - 'loop' - focus on the first focusable element and loop through the focusable elements
    */
-  'focus-behaviour'?: 'none' | 'chain' | 'loop';
+  'focus-behavior'?: 'none' | 'chain' | 'loop';
 
   /** Define Toggleable group meta information to organize groups */
   'group'?: string;

src/modules/esl-toggleable/core/esl-toggleable.ts

@@ -119,6 +119,7 @@ export class ESLToggleable extends ESLBaseElement {
   /**
    * Focus behavior. Available values:
    * - 'none' - no focus management
+   * - 'grab' - focus on the first focusable element
    * - 'chain' - focus on the first focusable element first and return focus to the activator after the last focusable element
    * - 'loop' - focus on the first focusable element and loop through the focusable elements
    */
@@ -284,7 +285,7 @@ export class ESLToggleable extends ESLBaseElement {
   /**
    * Actions to execute on show toggleable.
    * Inner state and 'open' attribute are not affected and updated before `onShow` execution.
-   * Adds CSS classes, update a11y and fire {@link ESLToggleable.REFRESH_EVENT} event by default.
+   * Adds CSS classes, update a11y and fire {@link ESLBaseElement.REFRESH_EVENT} event by default.
    */
   protected onShow(params: ESLToggleableActionParams): void {
     this.open = true;
@@ -417,15 +418,15 @@ export class ESLToggleable extends ESLBaseElement {
   @listen('focusout')
   protected _onFocusOut(e: FocusEvent): void {
     if (!this.open) return;
-    if (this.focusBehavior === 'chain') {
-      afterNextRender(() => {
-        if (this.hasFocus) return;
+    afterNextRender(() => {
+      if (this.hasFocus) return;
+      if (this.focusBehavior === 'chain') {
         this.hide({initiator: 'focusout', event: e});
-      });
-    }
-    if (this.focusBehavior === 'loop') {
-      this.focus({preventScroll: true});
-    }
+      }
+      if (this.focusBehavior === 'loop') {
+        this.focus({preventScroll: true});
+      }
+    });
   }
 
   @listen({auto: false, event: 'mouseenter'})

src/modules/esl-tooltip/core/esl-tooltip.ts

@@ -75,6 +75,7 @@ export class ESLTooltip extends ESLPopup {
     this.dir = params.dir || '';
     this.lang = params.lang || '';
     this.parentNode !== document.body && document.body.appendChild(this);
+
     super.onShow(params);
   }
 

src/modules/esl-utils/dom/focus.ts

@@ -34,8 +34,8 @@ export const handleFocusFlow = (
 
   if (type === 'loop') return handleFocusChain(e, $first, $last);
 
-  if (type === 'chain' && $last && $fallback) {
-    if (e.target !== (e.shiftKey ? $first : $last)) return;
+  if (type === 'chain' && $fallback) {
+    if ($last && e.target !== (e.shiftKey ? $first : $last)) return;
     $fallback.focus();
     e.preventDefault();
   }