Fix #7196: Remove unnecessary timeout for opening overlay in MultiSel…

…ect (#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

@@ -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 };
 

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();
     });

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]);
 

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,