Merge pull request primefaces#6958 from primefaces/6957-autocomplete-…

…autohighlight-prop-is-not-working-properly Autocomplete autoHighlight prop is inconsistent
melloware · Jul 31, 2024 · 92f8164 · 92f8164
2 parents c5f6f9f + 175ee0e
commit 92f8164
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
@@ -193,12 +193,16 @@ export const AutoComplete = React.memo(
 
         const onOverlayEntering = () => {
             if (props.autoHighlight && props.suggestions && props.suggestions.length) {
-                const element = getScrollableElement().firstChild.firstChild;
+                autoHighlightFirstOption();
+            }
+        };
 
-                if (element) {
-                    !isUnstyled() && DomHandler.addClass(element, 'p-highlight');
-                    element.setAttribute('data-p-highlight', true);
-                }
+        const autoHighlightFirstOption = () => {
+            const element = getScrollableElement()?.firstChild?.firstChild;
+
+            if (element) {
+                !isUnstyled() && DomHandler.addClass(element, 'p-highlight');
+                element.setAttribute('data-p-highlight', true);
             }
         };
 
@@ -453,7 +457,7 @@ export const AutoComplete = React.memo(
         };
 
         const getScrollableElement = () => {
-            return overlayRef.current.firstChild;
+            return overlayRef?.current?.firstChild;
         };
 
         const getOptionGroupLabel = (optionGroup) => {
@@ -472,6 +476,12 @@ export const AutoComplete = React.memo(
             ObjectUtils.combinedRefs(inputRef, props.inputRef);
         }, [inputRef, props.inputRef]);
 
+        React.useEffect(() => {
+            if (searchingState && props.autoHighlight && props.suggestions && props.suggestions.length) {
+                autoHighlightFirstOption();
+            }
+        }, [searchingState]);
+
         useMountEffect(() => {
             if (!idState) {
                 setIdState(UniqueComponentId());