Merge pull request #6032 from melloware/PR6027

Fix #6027: Dropdown filter and editable
primefaces · Mar 18, 2024 · 8a1cd1e · 8a1cd1e
2 parents 3bd0199 + 28435c7
commit 8a1cd1e
Showing 1 changed file with 8 additions and 10 deletions.
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -17,10 +17,10 @@ export const Dropdown = React.memo(
         const context = React.useContext(PrimeReactContext);
         const props = DropdownBase.getProps(inProps, context);
         const [filterState, setFilterState] = React.useState('');
-        const [clicked, setClicked] = React.useState(false);
         const [focusedState, setFocusedState] = React.useState(false);
         const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
         const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+        const clickedRef = React.useRef(false);
         const elementRef = React.useRef(null);
         const overlayRef = React.useRef(null);
         const firstHiddenFocusableElementOnOverlay = React.useRef(null);
@@ -117,7 +117,7 @@ export const Dropdown = React.memo(
                 overlayVisibleState ? hide() : show();
             }
 
-            setClicked(true);
+            clickedRef.current = true;
         };
 
         const onInputFocus = (event) => {
@@ -240,14 +240,14 @@ export const Dropdown = React.memo(
 
                 default:
                     if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                        !overlayVisibleState && show();
+                        !overlayVisibleState && !props.editable && show();
                         !props.editable && searchOptions(event, event.key);
                     }
 
                     break;
             }
 
-            setClicked(false);
+            clickedRef.current = false;
         };
 
         const onFilterInputKeyDown = (event) => {
@@ -386,7 +386,7 @@ export const Dropdown = React.memo(
                 show();
                 props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
             } else {
-                const optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clicked ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
+                const optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clickedRef.current ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
 
                 changeFocusedOptionIndex(event, optionIndex);
             }
@@ -403,7 +403,7 @@ export const Dropdown = React.memo(
                 state.overlayVisible && hide();
                 event.preventDefault();
             } else {
-                const optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clicked ? findLastOptionIndex() : findLastFocusedOptionIndex();
+                const optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clickedRef.current ? findLastOptionIndex() : findLastFocusedOptionIndex();
 
                 changeFocusedOptionIndex(event, optionIndex);
 
@@ -627,8 +627,6 @@ export const Dropdown = React.memo(
         };
 
         const onEditableInputChange = (event) => {
-            !overlayVisibleState && show();
-
             let searchIndex = null;
 
             if (event.target.value) {
@@ -791,11 +789,11 @@ export const Dropdown = React.memo(
 
         const hide = () => {
             setOverlayVisibleState(false);
-            setClicked(false);
+            clickedRef.current = false;
         };
 
         const onFocus = () => {
-            if (props.editable) {
+            if (props.editable && !overlayVisibleState && clickedRef.current === false) {
                 DomHandler.focus(inputRef.current);
             }
         };