feat(addon-doc): adds keybindings to the search field (#8830)

taiga-family · Sep 11, 2024 · 8d03673 · 8d03673
1 parent 38d3def
commit 8d03673
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts
@@ -4,6 +4,7 @@ import {
     ChangeDetectorRef,
     Component,
     inject,
+    ViewChild,
 } from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
@@ -34,8 +35,7 @@ import {TuiScrollbar} from '@taiga-ui/core/components/scrollbar';
 import {TuiTextfield} from '@taiga-ui/core/components/textfield';
 import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';
 import {TuiAccordion} from '@taiga-ui/kit/components/accordion';
-import type {TuiInputComponent} from '@taiga-ui/legacy/components/input';
-import {TuiInputModule} from '@taiga-ui/legacy/components/input';
+import {TuiInputComponent, TuiInputModule} from '@taiga-ui/legacy/components/input';
 import {TuiTextfieldControllerModule} from '@taiga-ui/legacy/directives/textfield-controller';
 import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
 import {combineLatest, filter, map, switchMap, take} from 'rxjs';
@@ -79,9 +79,13 @@ import {TuiDocScrollIntoViewLink} from './scroll-into-view.directive';
     providers: NAVIGATION_PROVIDERS,
     host: {
         '[class._open]': 'menuOpen',
+        '(window:keydown)': 'onFocusSearch($event)',
     },
 })
 export class TuiDocNavigation {
+    @ViewChild(TuiInputComponent, {static: true})
+    private readonly searchInput?: TuiInputComponent;
+
     private readonly router = inject(Router);
     private readonly doc = inject(DOCUMENT);
 
@@ -165,6 +169,16 @@ export class TuiDocNavigation {
         this.openActivePageGroup();
     }
 
+    protected onFocusSearch(event: KeyboardEvent): void {
+        if (
+            event.code === 'Slash' &&
+            !(this.doc.activeElement instanceof HTMLInputElement)
+        ) {
+            this.searchInput?.nativeFocusableElement?.focus();
+            event.preventDefault();
+        }
+    }
+
     @tuiPure
     private filterItems(
         items: ReadonlyArray<readonly TuiDocRoutePage[]>,

diff --git a/projects/addon-doc/components/navigation/navigation.style.less b/projects/addon-doc/components/navigation/navigation.style.less
@@ -15,6 +15,17 @@
     ::ng-deep tui-icon {
         border: 0.25rem solid transparent;
     }
+
+    .t-search-text {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .t-slash {
+            block-size: 1rem;
+            font-size: 0.5rem;
+        }
+    }
 }
 
 .t-navigation {

diff --git a/projects/addon-doc/components/navigation/navigation.template.html b/projects/addon-doc/components/navigation/navigation.template.html
@@ -8,7 +8,10 @@
     [tuiTextfieldIconLeft]="docIcons.search"
     [tuiTextfieldLabelOutside]="true"
 >
-    {{ searchText }}
+    <div class="t-search-text">
+        {{ searchText }}
+        <code class="t-slash">/</code>
+    </div>
     <ng-container *ngIf="canOpen">
         <tui-data-list *tuiDataList>
             <tui-opt-group