From 3718fad9c68a5701f9f5eadb4b4f718606d96f7b Mon Sep 17 00:00:00 2001
From: Kyrylo Hrishchenko <khris.private@gmail.com>
Date: Tue, 17 Sep 2024 20:12:13 +0300
Subject: [PATCH] Fix #7196: Remove unnecessary timeout for opening overlay in
 MultiSelect (#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
---
 components/lib/csstransition/CSSTransition.js  | 2 +-
 components/lib/hooks/useOverlayListener.js     | 4 ----
 components/lib/multiselect/MultiSelect.js      | 8 +++++---
 components/lib/multiselect/MultiSelectPanel.js | 1 +
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/lib/csstransition/CSSTransition.js b/components/lib/csstransition/CSSTransition.js
index 9a16331b0b..003cf056f8 100644
--- 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
index c749a2960b..7529085ff3 100644
--- 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
index 42df0efaa1..3cb367866e 100644
--- 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
index bc63264ca8..a0da4f4206 100644
--- 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,