[DateTimePicker] Scroll to Digital Clock section only when selection …

…changes (#9434)
mui · Jun 27, 2023 · 575be07 · 575be07
1 parent 982eda2
commit 575be07
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx
@@ -120,6 +120,7 @@ export const MultiSectionDigitalClockSection = React.forwardRef(
   ) {
     const containerRef = React.useRef<HTMLUListElement>(null);
     const handleRef = useForkRef(ref, containerRef);
+    const previousSelected = React.useRef<HTMLElement | null>(null);
 
     const props = useThemeProps({
       props: inProps,
@@ -155,9 +156,14 @@ export const MultiSectionDigitalClockSection = React.forwardRef(
       const selectedItem = containerRef.current.querySelector<HTMLElement>(
         '[role="option"][aria-selected="true"]',
       );
-      if (!selectedItem) {
+      if (!selectedItem || previousSelected.current === selectedItem) {
+        // Handle setting the ref to null if the selected item is ever reset via UI
+        if (previousSelected.current !== selectedItem) {
+          previousSelected.current = selectedItem;
+        }
         return;
       }
+      previousSelected.current = selectedItem;
       if (active && autoFocus) {
         selectedItem.focus();
       }