implement fallback to composedPath in the unlikely case that it doesn…

…'t exist or returns an empty array
storybookjs · Sep 19, 2023 · 16968f0 · 16968f0
1 parent 4be9ce5
commit 16968f0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
@@ -3511,6 +3511,17 @@ describe('PreviewWeb', () => {
       expect(mockChannel.emit).toHaveBeenCalledWith(PREVIEW_KEYDOWN, expect.objectContaining({}));
     });
 
+    it('emits PREVIEW_KEYDOWN for regular elements, fallback to event.target', async () => {
+      document.location.search = '?id=component-one--docs&viewMode=docs';
+      const preview = await createAndRenderPreview();
+
+      preview.onKeydown({
+        target: { tagName: 'div', getAttribute: jest.fn().mockReturnValue(null) },
+      } as any);
+
+      expect(mockChannel.emit).toHaveBeenCalledWith(PREVIEW_KEYDOWN, expect.objectContaining({}));
+    });
+
     it('does not emit PREVIEW_KEYDOWN for input elements', async () => {
       document.location.search = '?id=component-one--docs&viewMode=docs';
       const preview = await createAndRenderPreview();

diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx
@@ -45,7 +45,7 @@ import type { StorySpecifier } from '../store/StoryIndexStore';
 const globalWindow = globalThis;
 
 function focusInInput(event: Event) {
-  const target = event.composedPath()[0] as Element;
+  const target = ((event.composedPath && event.composedPath()[0]) || event.target) as Element;
   return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
 }