feat(DatePickerE): Focus open/close button when day picker is closed

Royal-Navy · Dec 7, 2021 · 86d4a65 · 86d4a65
1 parent 4771a5e
commit 86d4a65
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/packages/react-component-library/src/components/DatePickerE/DatePickerE.test.tsx b/packages/react-component-library/src/components/DatePickerE/DatePickerE.test.tsx
@@ -629,6 +629,12 @@ describe('DatePickerE', () => {
           expect(wrapper.queryByTestId('floating-box')).not.toBeInTheDocument()
         })
       })
+
+      it('focuses the open/close button', () => {
+        return waitFor(() =>
+          expect(wrapper.queryByTestId('datepicker-input-button')).toHaveFocus()
+        )
+      })
     })
 
     describe('when the next month button is clicked', () => {
@@ -659,6 +665,14 @@ describe('DatePickerE', () => {
           })
         })
 
+        it('focuses the open/close button', () => {
+          return waitFor(() =>
+            expect(
+              wrapper.queryByTestId('datepicker-input-button')
+            ).toHaveFocus()
+          )
+        })
+
         describe('when the picker is reopened', () => {
           beforeEach(async () => {
             await waitForElementToBeRemoved(
@@ -781,6 +795,14 @@ describe('DatePickerE', () => {
           })
         })
 
+        it('focuses the open/close button', () => {
+          return waitFor(() =>
+            expect(
+              wrapper.queryByTestId('datepicker-input-button')
+            ).toHaveFocus()
+          )
+        })
+
         it('set the value of the component to this date', () => {
           expect(
             wrapper.getByTestId('datepicker-input').getAttribute('value')

diff --git a/packages/react-component-library/src/components/DatePickerE/useDatePickerEOpenClose.ts b/packages/react-component-library/src/components/DatePickerE/useDatePickerEOpenClose.ts
@@ -12,12 +12,17 @@ export function useDatePickerEOpenClose(isOpen = false): {
 } {
   const { open, handleOnClose, handleOnFocus } = useOpenClose(isOpen)
   const floatingBoxChildrenRef = useRef()
-  const inputButtonRef = useRef()
+  const inputButtonRef = useRef<HTMLButtonElement>()
   const inputRef = useRef()
 
   const handleDatePickerOnClose = useCallback(() => {
+    if (!open) {
+      return
+    }
+
     handleOnClose(null)
-  }, [handleOnClose])
+    inputButtonRef.current?.focus()
+  }, [handleOnClose, open])
 
   useDocumentClick(
     [floatingBoxChildrenRef, inputButtonRef, inputRef],

diff --git a/packages/react-component-library/src/hooks/useDocumentClick.ts b/packages/react-component-library/src/hooks/useDocumentClick.ts
@@ -19,9 +19,7 @@ const NODE_CURRENT = {
  * to false if the hook needs to be enabled or disabled dynamically
  */
 export function useDocumentClick(
-  nodes:
-    | React.MutableRefObject<undefined>
-    | React.MutableRefObject<undefined>[],
+  nodes: React.MutableRefObject<Element> | React.MutableRefObject<Element>[],
   onDocumentClick: (event: Event) => void,
   isEnabled = true
 ) {
@@ -31,9 +29,9 @@ export function useDocumentClick(
 
       const nonClickableRef = find(
         nonClickableRefs,
-        (node: React.MutableRefObject<undefined>) => {
+        (node: React.MutableRefObject<Element>) => {
           const current = node.current || NODE_CURRENT
-          return current.contains(event.target)
+          return current.contains(event.target as Element)
         }
       )