fix(ui-shell): prevent header panel from closing on internal clicks (#19992)

* fix(ui-shell): prevent header panel from closing on internal clicks

* fix(dropdown): prevent page scroll on arrow key navigation

* fix(ui-shell): close panel when tabbing out of dropdown

* chore(test): remove example test

Author: heloiselui

packages/web-components/src/components/dropdown/dropdown.ts

@@ -179,6 +179,7 @@ class CDSDropdown extends ValidityMixin(
           this._handleUserInitiatedToggle(false);
           break;
         case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:
+          event.preventDefault();
           this._navigate(NAVIGATION_DIRECTION[key]);
           break;
         default:

packages/web-components/src/components/ui-shell/header-global-action.ts

@@ -61,22 +61,37 @@ class CDSHeaderGlobalAction extends CDSButton {
 
   firstUpdated() {
     document.addEventListener('click', this._handleDocumentClick, true);
+    document.addEventListener('focusin', this._handleDocumentFocusIn, true);
   }
 
   disconnectedCallback() {
     document.removeEventListener('click', this._handleDocumentClick, true);
+    document.removeEventListener('focusin', this._handleDocumentFocusIn, true);
     super.disconnectedCallback();
   }
 
   private _handleDocumentClick = (event: MouseEvent) => {
+    const path = event.composedPath();
+    this._handlePanelCloseIfFocusOutside(path);
+  };
+
+  private _handleDocumentFocusIn = (event: FocusEvent) => {
+    const path = event.composedPath();
+    this._handlePanelCloseIfFocusOutside(path);
+  };
+
+  private _handlePanelCloseIfFocusOutside(path: EventTarget[]) {
     const panel = this.ownerDocument?.querySelector(`#${this.panelId}`);
-    const target = event.composedPath()[0] as HTMLElement;
+    const isInside = path.some(
+      (el) =>
+        el instanceof HTMLElement && (panel?.contains(el) || this.contains(el))
+    );
 
-    if (panel && !this.contains(target) && !panel.contains(target)) {
+    if (panel && !isInside) {
       panel.removeAttribute('expanded');
       this.active = false;
     }
-  };
+  }
 
   @HostListener('focusout')
   // @ts-ignore