From cc4c8513e4f1fd61bfc8b02ff293896ae7d601a1 Mon Sep 17 00:00:00 2001 From: Damien Robson Date: Tue, 21 Jan 2025 09:22:24 +0000 Subject: [PATCH] feat(date): fix focus loss when using navbar with keyboard The Navbar of the internal date picker component has been memoized to ensure that it doesn't rerender unless it absolutely needs to (which should be never as it's just two buttons; the month name isn't part of the navbar, it's just styled that way) fix #7158 --- .../date-picker/date-picker.component.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/date/__internal__/date-picker/date-picker.component.tsx b/src/components/date/__internal__/date-picker/date-picker.component.tsx index 14a7890b08..27106f0b7d 100644 --- a/src/components/date/__internal__/date-picker/date-picker.component.tsx +++ b/src/components/date/__internal__/date-picker/date-picker.component.tsx @@ -6,6 +6,7 @@ import React, { useMemo, useRef, useState, + memo, } from "react"; import { DayPicker, @@ -72,6 +73,17 @@ const popoverMiddleware = [ }), ]; +/** The Navbar has been lifted out of the main component to ensure that it can be properly + * memoized and not re-rendered on every update of the DatePicker component. + * + * Resolves https://jira.sage.com/browse/FE-7047 + */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const Nav = (props: any) => { + return ; +}; +const MemoizedNav = memo(Nav); + export const DatePicker = ({ inputElement, minDate, @@ -257,9 +269,10 @@ export const DatePicker = ({ handleDayClick(date, e); }} components={{ - Nav: (props) => { - return ; - }, + // TODO: Fix this. It's a horrible approach to take. + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore: Type 'MemoizedNav' is not assignable to type 'ComponentType'. + Nav: MemoizedNav, Weekday: (props) => { const fixedDays = { Sunday: 0,