fix(Datepicker): Fix keyboard navigation inside Shadow DOM

kronostechnologies · Mar 26, 2021 · a44ffc4 · a44ffc4
1 parent e84f5cc
commit a44ffc4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/packages/react/src/components/datepicker/datepicker.tsx b/packages/react/src/components/datepicker/datepicker.tsx
@@ -382,18 +382,6 @@ export const Datepicker = forwardRef(({
         }
     }, [currentLocale, firstDayOfWeek]);
 
-    function handleCalendarKeyDown(event: KeyboardEvent<HTMLDivElement>): void {
-        if (event.key === 'Escape') {
-            event.stopPropagation();
-            dateInputRef.current?.setOpen(false);
-            calendarButtonRef.current?.focus();
-        }
-    }
-
-    function handleCalendarSelect(): void {
-        calendarButtonRef.current?.focus();
-    }
-
     function focusCalendarDate(): void {
         setTimeout(() => {
             const dateToFocus = calendarRef.current
@@ -405,6 +393,26 @@ export const Datepicker = forwardRef(({
         }, 0);
     }
 
+    function handleCalendarKeyDown(event: KeyboardEvent<HTMLDivElement>): void {
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                focusCalendarDate();
+                break;
+            case 'Escape':
+                event.stopPropagation();
+                dateInputRef.current?.setOpen(false);
+                calendarButtonRef.current?.focus();
+                break;
+        }
+    }
+
+    function handleCalendarSelect(): void {
+        calendarButtonRef.current?.focus();
+    }
+
     function handleCalendarButtonMouseDown(event: MouseEvent<HTMLButtonElement>): void {
         event.stopPropagation();
         if (dateInputRef.current?.isCalendarOpen()) {

diff --git a/packages/storybook/stories/datepicker.stories.tsx b/packages/storybook/stories/datepicker.stories.tsx
@@ -3,6 +3,7 @@ import { Story } from '@storybook/react';
 import React, { FormEvent, useRef } from 'react';
 import styled from 'styled-components';
 import { decorateWith } from './utils/decorator';
+import { ShadowDomDecorator } from './utils/shadow-dom-decorator';
 
 const Container = styled.div`
     height: 400px;
@@ -22,6 +23,11 @@ export const Normal: Story = () => (
     <Datepicker label="Date" hint="Hint" />
 );
 
+export const InsideShadowDom: Story = () => (
+    <Datepicker label="Date" hint="Hint" />
+);
+InsideShadowDom.decorators = [ShadowDomDecorator];
+
 export const WithTodayButton: Story = () => (
     <Datepicker label="Date" hasTodayButton />
 );