[pickers] Cleanup PageUp and PageDown event handlers on time comp…

…onents (#14928)
mui · Oct 14, 2024 · 5c44f5c · 5c44f5c
1 parent 95d67b6
commit 5c44f5c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 22 deletions.
diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx
@@ -299,11 +299,8 @@ export const DigitalClock = React.forwardRef(function DigitalClock<TDate extends
   const handleKeyDown = (event: React.KeyboardEvent) => {
     switch (event.key) {
       case 'PageUp': {
-        if (!listRef.current) {
-          return;
-        }
-        const newIndex = getFocusedListItemIndex(listRef.current) - 5;
-        const children = listRef.current?.children;
+        const newIndex = getFocusedListItemIndex(listRef.current!) - 5;
+        const children = listRef.current!.children;
         const newFocusedIndex = Math.max(0, newIndex);
 
         const childToFocus = children[newFocusedIndex];
@@ -314,11 +311,8 @@ export const DigitalClock = React.forwardRef(function DigitalClock<TDate extends
         break;
       }
       case 'PageDown': {
-        if (!listRef.current) {
-          return;
-        }
-        const newIndex = getFocusedListItemIndex(listRef.current) + 5;
-        const children = listRef.current?.children;
+        const newIndex = getFocusedListItemIndex(listRef.current!) + 5;
+        const children = listRef.current!.children;
         const newFocusedIndex = Math.min(children.length - 1, newIndex);
 
         const childToFocus = children[newFocusedIndex];

diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx
@@ -191,11 +191,8 @@ export const MultiSectionDigitalClockSection = React.forwardRef(
     const handleKeyDown = (event: React.KeyboardEvent) => {
       switch (event.key) {
         case 'PageUp': {
-          if (!containerRef.current) {
-            return;
-          }
-          const newIndex = getFocusedListItemIndex(containerRef.current) - 5;
-          const children = containerRef.current?.children;
+          const newIndex = getFocusedListItemIndex(containerRef.current!) - 5;
+          const children = containerRef.current!.children;
           const newFocusedIndex = Math.max(0, newIndex);
 
           const childToFocus = children[newFocusedIndex];
@@ -206,11 +203,8 @@ export const MultiSectionDigitalClockSection = React.forwardRef(
           break;
         }
         case 'PageDown': {
-          if (!containerRef.current) {
-            return;
-          }
-          const newIndex = getFocusedListItemIndex(containerRef.current) + 5;
-          const children = containerRef.current?.children;
+          const newIndex = getFocusedListItemIndex(containerRef.current!) + 5;
+          const children = containerRef.current!.children;
           const newFocusedIndex = Math.min(children.length - 1, newIndex);
 
           const childToFocus = children[newFocusedIndex];

diff --git a/packages/x-date-pickers/src/internals/utils/utils.ts b/packages/x-date-pickers/src/internals/utils/utils.ts
@@ -54,8 +54,8 @@ export const getActiveElement = (root: Document | ShadowRoot = document): Elemen
  * @returns {number} The index of the focused list item, or -1 if none is focused.
  */
 export const getFocusedListItemIndex = (listElement: HTMLUListElement): number => {
-  const children = listElement.children;
-  return Array.from(children).findIndex((child) => child === getActiveElement(document));
+  const children = Array.from(listElement.children);
+  return children.indexOf(getActiveElement(document)!);
 };
 
 export const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';