Fix ngbDropdown stealing keyboard events

src-ui/src/app/components/app-frame/global-search/global-search.component.html

@@ -36,7 +36,8 @@
             </div>
             <div class="btn-group ms-auto">
                 <button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
-                (click)="primaryAction(type, item); $event.stopPropagation()"
+                (click)="primaryAction(type, item); $event.stopImmediatePropagation()"
+                (keydown)="onButtonKeyDown($event)"
                 [disabled]="disablePrimaryButton(type, item)"
                 (mouseenter)="onButtonHover($event)">
                     @if (type === DataType.Document) {
@@ -55,7 +56,8 @@
                 </button>
                 @if (type !== DataType.SavedView && type !== DataType.Workflow && type !== DataType.CustomField && type !== DataType.Group && type !== DataType.User && type !== DataType.MailAccount && type !== DataType.MailRule) {
                     <button #secondaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
-                    (click)="secondaryAction(type, item); $event.stopPropagation()"
+                    (click)="secondaryAction(type, item); $event.stopImmediatePropagation()"
+                    (keydown)="onButtonKeyDown($event)"
                     [disabled]="disableSecondaryButton(type, item)"
                     (mouseenter)="onButtonHover($event)">
                         @if (type === DataType.Document) {
@@ -71,7 +73,8 @@
         </div>
     </ng-template>
 
-    <div ngbDropdownMenu class="w-100 mh-75 overflow-y-scroll shadow-lg" (keydown)="dropdownKeyDown($event)">
+    <div ngbDropdownMenu class="w-100 mh-75 overflow-y-scroll shadow-lg">
+        <div (keydown)="dropdownKeyDown($event)">
             @if (searchResults?.total === 0) {
                 <h6 class="dropdown-header" i18n="@@searchResults.noResults">No results</h6>
             } @else {
@@ -158,6 +161,6 @@
                     }
                 }
             }
-
+        </div>
     </div>
 </div>

src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts

@@ -442,6 +442,13 @@ describe('GlobalSearchComponent', () => {
     expect(focusSpy).toHaveBeenCalled()
   })
 
+  it('should prevent event propagation for keyboard events on buttons that are not arrows', () => {
+    const event = { stopImmediatePropagation: jest.fn(), key: 'Enter' }
+    const stopPropagationSpy = jest.spyOn(event, 'stopImmediatePropagation')
+    component.onButtonKeyDown(event as any)
+    expect(stopPropagationSpy).toHaveBeenCalled()
+  })
+
   it('should support explicit advanced search', () => {
     const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
     component.query = 'test'

src-ui/src/app/components/app-frame/global-search/global-search.component.ts

@@ -292,6 +292,7 @@ export class GlobalSearchComponent implements OnInit {
     ) {
       if (event.key === 'ArrowDown') {
         event.preventDefault()
+        event.stopImmediatePropagation()
         if (this.currentItemIndex < this.searchResults.total - 1) {
           this.currentItemIndex++
           this.setCurrentItem()
@@ -301,6 +302,7 @@ export class GlobalSearchComponent implements OnInit {
         }
       } else if (event.key === 'ArrowUp') {
         event.preventDefault()
+        event.stopImmediatePropagation()
         if (this.currentItemIndex > 0) {
           this.currentItemIndex--
           this.setCurrentItem()
@@ -310,14 +312,25 @@ export class GlobalSearchComponent implements OnInit {
         }
       } else if (event.key === 'ArrowRight') {
         event.preventDefault()
+        event.stopImmediatePropagation()
         this.secondaryButtons.get(this.domIndex)?.nativeElement.focus()
       } else if (event.key === 'ArrowLeft') {
         event.preventDefault()
+        event.stopImmediatePropagation()
         this.primaryButtons.get(this.domIndex).nativeElement.focus()
       }
     }
   }
 
+  onButtonKeyDown(event: KeyboardEvent) {
+    // prevents ngBootstrap issue with keydown events
+    if (
+      !['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)
+    ) {
+      event.stopImmediatePropagation()
+    }
+  }
+
   public onDropdownOpenChange(open: boolean) {
     if (!open) {
       this.reset()