From 04e26ce68cb51076b824b77f4892f03d5256ad91 Mon Sep 17 00:00:00 2001
From: jpveooys <66470099+jpveooys@users.noreply.github.com>
Date: Mon, 17 Jan 2022 17:03:05 +0000
Subject: [PATCH] fix(DatePickerE): Clear range shading after second date is
 blurred

This fixes a small bug where when a second date of a range was being selected using the keyboard, the range would stay shading after tabbing from the second date to a different element.
---
 .../components/DatePickerE/DatePickerE.test.tsx    | 13 +++++++++++++
 .../src/components/DatePickerE/DatePickerE.tsx     | 12 ++++++------
 .../DatePickerE/useRangeHoverOrFocusDate.ts        | 14 +++++---------
 3 files changed, 24 insertions(+), 15 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
index 2c2c7d35da..6fcdaa9e97 100644
--- a/packages/react-component-library/src/components/DatePickerE/DatePickerE.test.tsx
+++ b/packages/react-component-library/src/components/DatePickerE/DatePickerE.test.tsx
@@ -804,6 +804,19 @@ describe('DatePickerE', () => {
             })
           ).toHaveLength(0)
         })
+
+        describe('and then presses the tab key', () => {
+          beforeEach(() => {
+            userEvent.tab()
+          })
+
+          it('clears the range and removes the shading', () => {
+            // The start date still has the modifier
+            expect(
+              wrapper.container.querySelectorAll('.rdp-day_selected')
+            ).toHaveLength(1)
+          })
+        })
       })
 
       describe('and clicks on a second date', () => {
diff --git a/packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx b/packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx
index 8f3c5cce57..97f22b66c6 100644
--- a/packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx
+++ b/packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx
@@ -204,9 +204,8 @@ export const DatePickerE: React.FC<DatePickerEProps> = ({
 
   const {
     rangeHoverOrFocusDate,
-    handleDayFocus,
-    handleDayMouseEnter,
-    handleDayMouseLeave,
+    handleDayFocusOrMouseEnter,
+    handleDayBlurOrMouseLeave,
   } = useRangeHoverOrFocusDate(isRange)
 
   const { handleKeyDown, handleInputBlur, handleInputChange } = useInput(
@@ -339,9 +338,10 @@ export const DatePickerE: React.FC<DatePickerEProps> = ({
               }}
               defaultMonth={replaceInvalidDate(startDate) || initialMonth}
               disabled={disabledDays}
-              onDayMouseEnter={handleDayMouseEnter}
-              onDayMouseLeave={handleDayMouseLeave}
-              onDayFocus={handleDayFocus}
+              onDayMouseEnter={handleDayFocusOrMouseEnter}
+              onDayMouseLeave={handleDayBlurOrMouseLeave}
+              onDayFocus={handleDayFocusOrMouseEnter}
+              onDayBlur={handleDayBlurOrMouseLeave}
             />
           </div>
         </FocusTrap>
diff --git a/packages/react-component-library/src/components/DatePickerE/useRangeHoverOrFocusDate.ts b/packages/react-component-library/src/components/DatePickerE/useRangeHoverOrFocusDate.ts
index da8333acf6..5bf0a9fe96 100644
--- a/packages/react-component-library/src/components/DatePickerE/useRangeHoverOrFocusDate.ts
+++ b/packages/react-component-library/src/components/DatePickerE/useRangeHoverOrFocusDate.ts
@@ -3,14 +3,11 @@ import { useCallback, useState } from 'react'
 /**
  * Hook to keep track of the date being hovered over or focused
  * when in range mode.
- *
- * @todo Add handleDayBlur after upgrading to react-day-picker v8.
  */
 export function useRangeHoverOrFocusDate(isRange: boolean): {
   rangeHoverOrFocusDate: Date
-  handleDayFocus: (date: Date) => void
-  handleDayMouseEnter: (date: Date) => void
-  handleDayMouseLeave: () => void
+  handleDayFocusOrMouseEnter: (date: Date) => void
+  handleDayBlurOrMouseLeave: () => void
 } {
   const [rangeHoverOrFocusDate, setRangeHoverOrFocusDate] =
     useState<Date | null>(null)
@@ -24,7 +21,7 @@ export function useRangeHoverOrFocusDate(isRange: boolean): {
     [isRange]
   )
 
-  const handleDayMouseLeave = useCallback(() => {
+  const handleDayBlurOrMouseLeave = useCallback(() => {
     if (isRange) {
       setRangeHoverOrFocusDate(null)
     }
@@ -32,8 +29,7 @@ export function useRangeHoverOrFocusDate(isRange: boolean): {
 
   return {
     rangeHoverOrFocusDate,
-    handleDayFocus: handleDayFocusOrMouseEnter,
-    handleDayMouseEnter: handleDayFocusOrMouseEnter,
-    handleDayMouseLeave,
+    handleDayFocusOrMouseEnter,
+    handleDayBlurOrMouseLeave,
   }
 }