From c84d37de89fb460de3003279986b3368c3b0a03b Mon Sep 17 00:00:00 2001
From: Kyrylo Hrishchenko <khris.private@gmail.com>
Date: Tue, 17 Sep 2024 12:07:40 +0300
Subject: [PATCH] fix(MultiSelect): remove unnecessary timeout to open overlay

---
 components/lib/multiselect/MultiSelect.js | 132 +++++++++++-----------
 1 file changed, 67 insertions(+), 65 deletions(-)

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 42df0efaa1..2095bc7aea 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -285,93 +285,93 @@ export const MultiSelect = React.memo(
             const metaKey = event.metaKey || event.ctrlKey;
 
             switch (event.code) {
-                case 'ArrowUp':
-                    if (props.inline) {
-                        break;
-                    }
-
-                    onArrowUpKey(event);
+            case 'ArrowUp':
+                if (props.inline) {
                     break;
+                }
 
-                case 'ArrowDown':
-                    if (props.inline) {
-                        break;
-                    }
-
-                    onArrowDownKey(event);
+                onArrowUpKey(event);
+                break;
 
+            case 'ArrowDown':
+                if (props.inline) {
                     break;
+                }
 
-                case 'Space':
-                case 'NumpadEnter':
-                case 'Enter':
-                    if (props.inline) {
-                        break;
-                    }
-
-                    onEnterKey(event);
-                    break;
+                onArrowDownKey(event);
 
-                case 'Home':
-                    if (props.inline) {
-                        break;
-                    }
+                break;
 
-                    onHomeKey(event);
-                    event.preventDefault();
+            case 'Space':
+            case 'NumpadEnter':
+            case 'Enter':
+                if (props.inline) {
                     break;
+                }
 
-                case 'End':
-                    if (props.inline) {
-                        break;
-                    }
+                onEnterKey(event);
+                break;
 
-                    onEndKey(event);
-                    event.preventDefault();
+            case 'Home':
+                if (props.inline) {
                     break;
+                }
 
-                case 'PageDown':
-                    onPageDownKey(event);
-                    break;
+                onHomeKey(event);
+                event.preventDefault();
+                break;
 
-                case 'PageUp':
-                    onPageUpKey(event);
+            case 'End':
+                if (props.inline) {
                     break;
+                }
 
-                case 'Escape':
-                    if (props.inline) {
-                        break;
-                    }
+                onEndKey(event);
+                event.preventDefault();
+                break;
 
-                    hide();
-                    break;
+            case 'PageDown':
+                onPageDownKey(event);
+                break;
 
-                case 'Tab':
-                    onTabKey(event);
-                    break;
+            case 'PageUp':
+                onPageUpKey(event);
+                break;
 
-                case 'ShiftLeft':
-                case 'ShiftRight':
-                    onShiftKey(event);
+            case 'Escape':
+                if (props.inline) {
                     break;
+                }
 
-                default:
-                    if (event.code === 'KeyA' && metaKey) {
-                        const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
+                hide();
+                break;
 
-                        updateModel(event, value, value);
+            case 'Tab':
+                onTabKey(event);
+                break;
 
-                        event.preventDefault();
-                        break;
-                    }
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                onShiftKey(event);
+                break;
 
-                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-                        !overlayVisibleState && show();
-                        searchOptions(event);
-                        event.preventDefault();
-                    }
+            default:
+                if (event.code === 'KeyA' && metaKey) {
+                    const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
+
+                    updateModel(event, value, value);
 
+                    event.preventDefault();
                     break;
+                }
+
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    !overlayVisibleState && show();
+                    searchOptions(event);
+                    event.preventDefault();
+                }
+
+                break;
             }
 
             setClicked(false);
@@ -961,9 +961,11 @@ export const MultiSelect = React.memo(
         }, [inputRef, props.inputRef]);
 
         React.useEffect(() => {
-            setTimeout(() => {
-                props.overlayVisible ? show() : hide();
-            }, 100);
+            if (props.overlayVisible) {
+                show();
+            } else {
+                hide();
+            }
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [props.overlayVisible]);