Merge pull request #6452 from melloware/PR6123

Fix #6123: Dropdown scroll into view on focus
primefaces · Apr 29, 2024 · 3ab5d32 · 3ab5d32
2 parents b5ed11d + a46c533
commit 3ab5d32
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -858,10 +858,16 @@ export const Dropdown = React.memo(
         };
 
         const scrollInView = () => {
-            const highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
+            const focusedItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-focused="true"]');
 
-            if (highlightItem && highlightItem.scrollIntoView) {
-                highlightItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            if (focusedItem && focusedItem.scrollIntoView) {
+                focusedItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            } else {
+                const highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
+
+                if (highlightItem && highlightItem.scrollIntoView) {
+                    highlightItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                }
             }
         };
 
@@ -959,10 +965,10 @@ export const Dropdown = React.memo(
         });
 
         useUpdateEffect(() => {
-            if (overlayVisibleState && props.value) {
+            if (overlayVisibleState && (props.value || focusedOptionIndex >= 0)) {
                 scrollInView();
             }
-        }, [overlayVisibleState, props.value]);
+        }, [overlayVisibleState, props.value, focusedOptionIndex]);
 
         useUpdateEffect(() => {
             if (overlayVisibleState && filterState && props.filter) {