playbook_ui 14.5.0.pre.rc.4 → 14.5.0.pre.rc.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 79f9b4c72f89ba63eecf8638ec8c27fb9a62e9a9e2566eeec8d7f10087aea924
-  data.tar.gz: 415d204f126cddba6763bbc1ca22ba76db3a72403f5e3d407ffb992be12f901b
+  metadata.gz: 8bb4fc0b70639490033875fbbf734462b07c72cdf35a2b9b9ca5f670dd5cd433
+  data.tar.gz: e26233f28c5914392ddc16a87a3107bd39b4943e14d002c409a54a9bc1d4b06f
 SHA512:
-  metadata.gz: c45481f61a83332e142cb028be5473c01a0f05b450376179edd5f68608d8fc6a88a140e74a3eef029c2dcc7f0a63d0b93a03219e60002e1858c3d9485c225436
-  data.tar.gz: d88e278a42278354c22a7e431517ed963b7f87322db9c5489546e36bb8c835c9c21db90c7bfd348764aa63fcda0ec85c71d82ab8938c773b97ecb075b8ffef43
+  metadata.gz: 10e77672d5309d7cbed79807fea62086fa30b40f268209342163a79d6eb1ac66050961070543d5077ba8f87af8d6f30dfe65e797c83761aade59d23f3acef79e
+  data.tar.gz: b442a063e7fd932c3bac853e9033cff26c1d2118e43d2c1ef2badde4aa0ddad302a9ae7d912a4f43b02dc176039c818b5e47e3fc67749d2135f89f9cb6acaf80

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -88,6 +88,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     item: []
   })
 
+  const arrowDownElementId = `arrow_down_${id}`
+  const arrowUpElementId = `arrow_up_${id}`
+
   const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
     if (!Array.isArray(tree)) {
       return
@@ -173,7 +176,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   useEffect(() => {
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target) &&
+        event.target.id !== arrowDownElementId &&
+        event.target.id !== arrowUpElementId
+      ) {
         setIsDropdownClosed(true)
       }
     }
@@ -260,7 +268,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
   const handleInputWrapperClick = (e: any) => {
-    e.stopPropagation()
     if (
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
@@ -518,16 +525,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           </div>
 
           {isDropdownClosed ? (
-            <div key="chevron-down">
+            <div id={arrowDownElementId}
+                key="chevron-down">
               <Icon
                   icon="chevron-down"
+                  id={arrowDownElementId}
                   size="xs"
               />
             </div>
           ) : (
-            <div key="chevron-up">
+            <div id={arrowUpElementId}
+                key="chevron-up">
               <Icon
                   icon="chevron-up"
+                  id={arrowUpElementId}
                   size="xs"
               />
             </div>