From 5c44f5c61b86da6636bd17c814571db97546e5d6 Mon Sep 17 00:00:00 2001
From: Arthur Suh Balduini <34691066+arthurbalduini@users.noreply.github.com>
Date: Mon, 14 Oct 2024 11:04:25 +0200
Subject: [PATCH] [pickers] Cleanup  `PageUp` and `PageDown` event handlers on
 time components (#14928)

---
 .../src/DigitalClock/DigitalClock.tsx              | 14 ++++----------
 .../MultiSectionDigitalClockSection.tsx            | 14 ++++----------
 .../x-date-pickers/src/internals/utils/utils.ts    |  4 ++--
 3 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx
index d66141043dc6..e07706cf1863 100644
--- 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
index f0311659b99f..bd68beaba510 100644
--- 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
index 56d7b2240630..a0549c798935 100644
--- 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)';