From 86893afaea8b67c54665db6f49b0292fc0f5504f Mon Sep 17 00:00:00 2001
From: Kam <erkamyaman35@gmail.com>
Date: Fri, 8 May 2026 00:55:10 +0300
Subject: [PATCH] fix(docs-infra): keep mobile nav open when closing the search
 dialog

Backdrop clicks on the search dialog were also closing the open mobile nav drawers. Adds an id to `<dialog>` and references it from both navs' `docsClickOutsideIgnore` arrays.
---
 .../components/search-dialog/search-dialog.component.html      | 2 +-
 adev/src/app/core/constants/element-ids.ts                     | 1 +
 adev/src/app/core/layout/navigation/navigation.component.html  | 2 +-
 adev/src/app/core/layout/navigation/navigation.component.ts    | 3 ++-
 .../secondary-navigation/secondary-navigation.component.html   | 2 +-
 .../secondary-navigation/secondary-navigation.component.ts     | 3 ++-
 6 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/adev/shared-docs/components/search-dialog/search-dialog.component.html b/adev/shared-docs/components/search-dialog/search-dialog.component.html
index b9ff5129ed3f..731daa5c6f08 100644
--- a/adev/shared-docs/components/search-dialog/search-dialog.component.html
+++ b/adev/shared-docs/components/search-dialog/search-dialog.component.html
@@ -1,4 +1,4 @@
-<dialog #searchDialog>
+<dialog #searchDialog id="docsSearchDialog">
   <div class="docs-search-container" (docsClickOutside)="closeSearchDialog()">
     <docs-text-field
       [autofocus]="true"
diff --git a/adev/src/app/core/constants/element-ids.ts b/adev/src/app/core/constants/element-ids.ts
index 1e014c392913..373a8162e233 100644
--- a/adev/src/app/core/constants/element-ids.ts
+++ b/adev/src/app/core/constants/element-ids.ts
@@ -8,3 +8,4 @@
 
 export const PRIMARY_NAV_ID = 'primaryNav';
 export const SECONDARY_NAV_ID = 'secondaryNav';
+export const SEARCH_DIALOG_ID = 'docsSearchDialog';
diff --git a/adev/src/app/core/layout/navigation/navigation.component.html b/adev/src/app/core/layout/navigation/navigation.component.html
index 146a7d405c1e..f68aebb28a2f 100644
--- a/adev/src/app/core/layout/navigation/navigation.component.html
+++ b/adev/src/app/core/layout/navigation/navigation.component.html
@@ -3,7 +3,7 @@
   [attr.id]="PRIMARY_NAV_ID"
   class="wrapper"
   (docsClickOutside)="closeMobileNav()"
-  [docsClickOutsideIgnore]="[SECONDARY_NAV_ID]"
+  [docsClickOutsideIgnore]="[SECONDARY_NAV_ID, SEARCH_DIALOG_ID]"
 >
   <!-- Mobile nav bar -->
   <div class="adev-mobile-nav-bar">
diff --git a/adev/src/app/core/layout/navigation/navigation.component.ts b/adev/src/app/core/layout/navigation/navigation.component.ts
index e5e3bd2dffaa..ba80340e6424 100644
--- a/adev/src/app/core/layout/navigation/navigation.component.ts
+++ b/adev/src/app/core/layout/navigation/navigation.component.ts
@@ -22,7 +22,7 @@ import {
 import {NavigationEnd, Router, RouterLink} from '@angular/router';
 import {filter, map, startWith} from 'rxjs/operators';
 import {DOCS_ROUTES, REFERENCE_ROUTES, TUTORIALS_ROUTES} from '../../../routing/routes';
-import {PRIMARY_NAV_ID, SECONDARY_NAV_ID} from '../../constants/element-ids';
+import {PRIMARY_NAV_ID, SEARCH_DIALOG_ID, SECONDARY_NAV_ID} from '../../constants/element-ids';
 import {COMMAND, CONTROL, SEARCH_TRIGGER_KEY} from '../../constants/keys';
 import {ANGULAR_LINKS} from '../../constants/links';
 import {PAGE_PREFIX} from '../../constants/pages';
@@ -52,6 +52,7 @@ export class Navigation {
   protected ngLinks = ANGULAR_LINKS;
   protected readonly PRIMARY_NAV_ID = PRIMARY_NAV_ID;
   protected readonly SECONDARY_NAV_ID = SECONDARY_NAV_ID;
+  protected readonly SEARCH_DIALOG_ID = SEARCH_DIALOG_ID;
 
   // We can't use the ActivatedRouter queryParams as we're outside the router outlet
   protected readonly isUwu = 'location' in globalThis ? location.search.includes('uwu') : false;
diff --git a/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.html b/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.html
index f287426deb5f..bb5203158c4a 100644
--- a/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.html
+++ b/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.html
@@ -3,7 +3,7 @@
   class="adev-secondary-nav-mask"
   [class.docs-nav-secondary--open]="isSecondaryNavVisible()"
   (docsClickOutside)="close()"
-  [docsClickOutsideIgnore]="[PRIMARY_NAV_ID]"
+  [docsClickOutsideIgnore]="[PRIMARY_NAV_ID, SEARCH_DIALOG_ID]"
 >
   <div
     class="docs-nav-secondary docs-scroll-track-transparent"
diff --git a/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.ts b/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.ts
index 25de7fec2faf..aaf1d1b072f2 100644
--- a/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.ts
+++ b/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.ts
@@ -23,7 +23,7 @@ import {
 import {ActivatedRouteSnapshot, NavigationEnd, Router, RouterStateSnapshot} from '@angular/router';
 import {distinctUntilChanged, filter, map, skip, startWith} from 'rxjs/operators';
 import {SUB_NAVIGATION_DATA} from '../../../routing/sub-navigation-data';
-import {PRIMARY_NAV_ID, SECONDARY_NAV_ID} from '../../constants/element-ids';
+import {PRIMARY_NAV_ID, SEARCH_DIALOG_ID, SECONDARY_NAV_ID} from '../../constants/element-ids';
 import {PAGE_PREFIX} from '../../constants/pages';
 
 export const ANIMATION_DURATION = 500;
@@ -57,6 +57,7 @@ export class SecondaryNavigation {
 
   protected readonly PRIMARY_NAV_ID = PRIMARY_NAV_ID;
   protected readonly SECONDARY_NAV_ID = SECONDARY_NAV_ID;
+  protected readonly SEARCH_DIALOG_ID = SEARCH_DIALOG_ID;
 
   private readonly routeMap: Record<string, NavigationItem[]> = {
     [PAGE_PREFIX.REFERENCE]: getNavigationItemsTree(SUB_NAVIGATION_DATA.reference, (tree) =>