fix(gallery): stop propagation on handled keys (#1696)

aivkov123 · Alexandr Ivkov · web-flow · commit 5490f68d9b2e · 2026-07-08T10:40:27.000-07:00
Prevents arrow/Home/End/Enter/Space/Escape keystrokes inside the gallery grid from bubbling to EndUserApp's HotkeyLayer, which was hijacking focus to the file browser.

Co-authored-by: Alexandr Ivkov &lt;aivkov@box.com&gt;
diff --git a/src/lib/viewers/gallery/GalleryGrid.tsx b/src/lib/viewers/gallery/GalleryGrid.tsx
@@ -270,29 +270,34 @@ export default function GalleryGrid({
                 // Listbox is 1-D — arrows move ±1; row-aware nav comes with v2 grid role.
                 case 'ArrowUp':
                 case 'ArrowLeft':
+                    event.preventDefault();
+                    event.stopPropagation();
                     if (focusedPage > 1) {
-                        event.preventDefault();
                         focusTile(focusedPage - 1);
                     }
                     return;
                 case 'ArrowDown':
                 case 'ArrowRight':
+                    event.preventDefault();
+                    event.stopPropagation();
                     if (focusedPage < pageCount) {
-                        event.preventDefault();
                         focusTile(focusedPage + 1);
                     }
                     return;
                 case 'Home':
                     event.preventDefault();
+                    event.stopPropagation();
                     focusTile(1);
                     return;
                 case 'End':
                     event.preventDefault();
+                    event.stopPropagation();
                     focusTile(pageCount);
                     return;
                 case 'Enter':
                 case 'Space':
                     event.preventDefault();
+                    event.stopPropagation();
                     onPageNavigate(focusedPage);
                     break;
                 default:
diff --git a/src/lib/viewers/gallery/__tests__/GalleryGrid-test.tsx b/src/lib/viewers/gallery/__tests__/GalleryGrid-test.tsx
@@ -189,6 +189,28 @@ describe('GalleryGrid', () => {
             await userEvent.keyboard(' ');
             expect(onPageNavigate).toHaveBeenCalledWith(3);
         });
+
+        test.each([
+            '{ArrowUp}',
+            '{ArrowDown}',
+            '{ArrowLeft}',
+            '{ArrowRight}',
+            '{Home}',
+            '{End}',
+            '{Enter}',
+            ' ',
+            '{Escape}',
+        ])('should stop propagation on %s so parent handlers do not fire', async keyString => {
+            const parentHandler = jest.fn();
+            document.addEventListener('keydown', parentHandler);
+            getWrapper();
+            screen.getByLabelText('Page 3').focus();
+
+            await userEvent.keyboard(keyString);
+
+            expect(parentHandler).not.toHaveBeenCalled();
+            document.removeEventListener('keydown', parentHandler);
+        });
     });
 
     describe('focus management', () => {
