Fix primefaces#7196: Remove unnecessary timeout for opening overlay i…

…n MultiSelect (primefaces#7197) * fix(MultiSelect): remove unnecessary timeout to open overlay * feat(CSSTransition): add ability to pass "appear" prop * refactor(useOverlayListener): remove duplicated useEffect * feat(MultiSelect): enhance handling of overlayVisible prop by checking if it's a boolean value * feat(MultiSelectPanel): add `appear=true` to fix an issue with calling onEnter callback during initial mount * fix: format check
melloware · Sep 17, 2024 · 3718fad · 3718fad
1 parent 6070e69
commit 3718fad
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git a/components/lib/csstransition/CSSTransition.js b/components/lib/csstransition/CSSTransition.js
@@ -63,7 +63,7 @@ export const CSSTransition = React.forwardRef((inProps, ref) => {
         return props.in ? props.children : null;
     }
 
-    const immutableProps = { nodeRef: props.nodeRef, in: props.in, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited };
+    const immutableProps = { nodeRef: props.nodeRef, in: props.in, appear: props.appear, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited };
     const mutableProps = { classNames: props.classNames, timeout: props.timeout, unmountOnExit: props.unmountOnExit };
     const mergedProps = { ...mutableProps, ...(props.options || {}), ...immutableProps };
 

diff --git a/components/lib/hooks/useOverlayListener.js b/components/lib/hooks/useOverlayListener.js
@@ -71,10 +71,6 @@ export const useOverlayListener = ({ target, overlay, listener, when = true, typ
         }
     }, [target, overlay, when]);
 
-    React.useEffect(() => {
-        unbind();
-    }, [when]);
-
     useUnmountEffect(() => {
         unbind();
     });

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
@@ -961,9 +961,11 @@ export const MultiSelect = React.memo(
         }, [inputRef, props.inputRef]);
 
         React.useEffect(() => {
-            setTimeout(() => {
-                props.overlayVisible ? show() : hide();
-            }, 100);
+            if (props.overlayVisible === true) {
+                show();
+            } else if (props.overlayVisible === false) {
+                hide();
+            }
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [props.overlayVisible]);
 

diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
@@ -321,6 +321,7 @@ export const MultiSelectPanel = React.memo(
                     in: props.in,
                     timeout: { enter: 120, exit: 100 },
                     options: props.transitionOptions,
+                    appear: true,
                     unmountOnExit: true,
                     onEnter,
                     onEntered,