Fix: Click on input outside of dropdown-menu prevents dropdown from closing (#33920)

* test: add test if user clicks on input not contained within dropdown-menu

* fix: click on inputs that are not contained within dropdown-menu prevent dropdown from closing

1 files changed, 4 insertions, 10 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 8bd3f01e70..f56ab201b7 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -408,14 +408,8 @@ class Dropdown extends BaseComponent {
   }
 
   static clearMenus(event) {
-    if (event) {
-      if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) {
-        return
-      }
-
-      if (/input|select|option|textarea|form/i.test(event.target.tagName)) {
-        return
-      }
+    if (event && (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY))) {
+      return
     }
 
     const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
@@ -445,8 +439,8 @@ class Dropdown extends BaseComponent {
           continue
         }
 
-        // Tab navigation through the dropdown menu shouldn't close the menu
-        if (event.type === 'keyup' && event.key === TAB_KEY && context._menu.contains(event.target)) {
+        // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu
+        if (context._menu.contains(event.target) && ((event.type === 'keyup' && event.key === TAB_KEY) || /input|select|option|textarea|form/i.test(event.target.tagName))) {
           continue
         }