UI: fix keydown focusInInput check when input is in a shadow dom

storybookjs · Sep 12, 2023 · 4be9ce5 · 4be9ce5
1 parent 22bc762
commit 4be9ce5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
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
@@ -3503,7 +3503,9 @@ describe('PreviewWeb', () => {
       const preview = await createAndRenderPreview();
 
       preview.onKeydown({
-        target: { tagName: 'div', getAttribute: jest.fn().mockReturnValue(null) },
+        composedPath: jest
+          .fn()
+          .mockReturnValue([{ tagName: 'div', getAttribute: jest.fn().mockReturnValue(null) }]),
       } as any);
 
       expect(mockChannel.emit).toHaveBeenCalledWith(PREVIEW_KEYDOWN, expect.objectContaining({}));
@@ -3514,7 +3516,9 @@ describe('PreviewWeb', () => {
       const preview = await createAndRenderPreview();
 
       preview.onKeydown({
-        target: { tagName: 'input', getAttribute: jest.fn().mockReturnValue(null) },
+        composedPath: jest
+          .fn()
+          .mockReturnValue([{ tagName: 'input', getAttribute: jest.fn().mockReturnValue(null) }]),
       } as any);
 
       expect(mockChannel.emit).not.toHaveBeenCalledWith(

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.target as Element;
+  const target = event.composedPath()[0] as Element;
   return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
 }