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.

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', () => {

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>

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,16 +21,15 @@ export function useRangeHoverOrFocusDate(isRange: boolean): {
  [isRange]
  )
 
- const handleDayMouseLeave = useCallback(() => {
+ const handleDayBlurOrMouseLeave = useCallback(() => {
  if (isRange) {
  setRangeHoverOrFocusDate(null)
  }
  }, [isRange])
 
  return {
  rangeHoverOrFocusDate,
- handleDayFocus: handleDayFocusOrMouseEnter,
- handleDayMouseEnter: handleDayFocusOrMouseEnter,
- handleDayMouseLeave,
+ handleDayFocusOrMouseEnter,
+ handleDayBlurOrMouseLeave,
  }
 }