playbook_ui 14.4.0.pre.alpha.PBNTR490multilevelselect3832 → 14.4.0.pre.alpha.PLAY1546highchartsbump3822

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f63133f4211356171c4c337c6b6f88ccd124ece3c656cc910f6992c02d4b8307
-  data.tar.gz: 46024fefb2d3bec396aa702f3e869c57cc68a0afcaa065519b795b0f850953fd
+  metadata.gz: 6bd72cfd66776d778ac938b9a8ec226a1602efc6e7bc5866784d2482987d62c7
+  data.tar.gz: cca369aa47b32f074ee1fe1f79a2a40a39f2aad530281f075aaf9ff4e77141b4
 SHA512:
-  metadata.gz: 67a1506b06a726ef4fad99dd67f5f8d846744d2baf483888b8603895921b3141ebecd9c6a21c4d14c855f145a6fbe9ce730cf68beb9895a86dd4770ef173d9c9
-  data.tar.gz: 3bf8db9e45660e3a7101584ee3f2f7dc9ea37d62c9cad61254300c52f80cb9172dc35d7cab3da1da50ced33488bbeed7f40ce45275f75f92c617769c7a52ac39
+  metadata.gz: 2479effd762ab25da0d9613c637e8ee745b8fdb3c58d2e8e078ef356380eecdf15d625b4b97f03d9fd60458365328d4f1eecf81ad5f801c36281e7c0772fb4e4
+  data.tar.gz: c7d558d46052c0ebdccc46edafe1b3ace9e259dd242b2aaaaafa602639a2309302edf5f50e08e0f35551dc0c168d61720a396b6fa2ac0509cb60ab04f2dcb9d6

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

@@ -88,9 +88,6 @@ 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
@@ -176,12 +173,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   useEffect(() => {
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target) &&
-        event.target.id !== arrowDownElementId &&
-        event.target.id !== arrowUpElementId
-      ) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsDropdownClosed(true)
       }
     }
@@ -268,6 +260,7 @@ 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")
@@ -525,20 +518,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           </div>
 
           {isDropdownClosed ? (
-            <div id={arrowDownElementId}
-                key="chevron-down">
+            <div key="chevron-down">
               <Icon
                   icon="chevron-down"
-                  id={arrowDownElementId}
                   size="xs"
               />
             </div>
           ) : (
-            <div id={arrowUpElementId}
-                key="chevron-up">
+            <div key="chevron-up">
               <Icon
                   icon="chevron-up"
-                  id={arrowUpElementId}
                   size="xs"
               />
             </div>