playbook_ui 14.5.0.pre.rc.4 → 14.5.0.pre.rc.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 79f9b4c72f89ba63eecf8638ec8c27fb9a62e9a9e2566eeec8d7f10087aea924
-  data.tar.gz: 415d204f126cddba6763bbc1ca22ba76db3a72403f5e3d407ffb992be12f901b
+  metadata.gz: 2320898ed4171121a268e62bfac933bf34c936ed7bbd1eadc3d815a8225caa13
+  data.tar.gz: d05a4ddd57b7b7bdccbaf306bd639bbfb81c380a742cbf9ab7e09eb37e27eee4
 SHA512:
-  metadata.gz: c45481f61a83332e142cb028be5473c01a0f05b450376179edd5f68608d8fc6a88a140e74a3eef029c2dcc7f0a63d0b93a03219e60002e1858c3d9485c225436
-  data.tar.gz: d88e278a42278354c22a7e431517ed963b7f87322db9c5489546e36bb8c835c9c21db90c7bfd348764aa63fcda0ec85c71d82ab8938c773b97ecb075b8ffef43
+  metadata.gz: d607e925a8f9672e7d120802051762cd82b3367bacebd96cacd396f117bd5e89a6d67c659b3b7f42b8033b724dfc86de56d754940e358092b8fd1dd87b344c38
+  data.tar.gz: 3b54a1ac3358502f0f6555bbbe936d5db88a6650089fb6f631c8235da55b3fefa963099e84f025bb2585a74d0e3b64c7e6e8351f88b7a5596ef389d3bca19a40

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>