@eturnity/eturnity_reusable_components 9.19.2 → 9.19.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.19.2",
+  "version": "9.19.3",
   "files": [
     "dist",
     "src"

package/src/components/inputs/select/index.vue

@@ -509,6 +509,9 @@
     Bottom: 'bottom',
   }
 
+  /** Capture phase so this runs before @click.stop on the caret (EPDM-18900). */
+  const CLICK_OUTSIDE_CAPTURE = true
+
   export default {
     name: 'RCselect',
 
@@ -885,7 +888,11 @@
     },
     beforeMount() {
       this.selectedValue = this.value
-      document.addEventListener('click', this.clickOutside)
+      document.addEventListener(
+        'click',
+        this.clickOutside,
+        CLICK_OUTSIDE_CAPTURE
+      )
       this.getDropdownPosition()
       window.removeEventListener('resize', this.handleSetDropdownOffet)
       if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
@@ -898,7 +905,11 @@
       }
     },
     unmounted() {
-      document.removeEventListener('click', this.clickOutside)
+      document.removeEventListener(
+        'click',
+        this.clickOutside,
+        CLICK_OUTSIDE_CAPTURE
+      )
     },
     methods: {
       getDropdownTopScrollYOffset() {
@@ -983,6 +994,7 @@
       clickOutside(event) {
         const dropdownRef = this.$refs.dropdown
         if (!this.isClickOutsideActive) return
+        if (!this.$refs.select?.$el || !dropdownRef?.$el) return
         if (
           this.$refs.select.$el == event.target ||
           this.$refs.select.$el.contains(event.target) ||

package/src/components/tableDropdown/index.vue

@@ -213,6 +213,9 @@
   import InfoText from '../infoText'
   import MainButton from '../buttons/mainButton'
 
+  /** Capture phase so this runs before @click.stop on arrows (EPDM-18900). */
+  const CLICK_OUTSIDE_CAPTURE = true
+
   const rowAttrs = { disabled: Boolean, isOpen: Boolean }
   const DropdownRow = styled('div', rowAttrs)`
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
@@ -577,7 +580,11 @@
     watch: {
       isOpen(newVal) {
         if (newVal) {
-          document.addEventListener('click', this.clickOutside)
+          document.addEventListener(
+            'click',
+            this.clickOutside,
+            CLICK_OUTSIDE_CAPTURE
+          )
           this.$emit('dropdown-search', '')
           this.$nextTick(() => {
             this.$refs.searchInput.$el.children[0].children[0].focus()
@@ -619,7 +626,11 @@
         }
         this.wasClicked = false
         if (!this.isOpen) {
-          document.addEventListener('click', this.clickOutside)
+          document.addEventListener(
+            'click',
+            this.clickOutside,
+            CLICK_OUTSIDE_CAPTURE
+          )
           this.$emit('dropdown-search', '')
           this.$nextTick(() => {
             this.scrollToItem()
@@ -629,7 +640,11 @@
             this.$refs.searchInput.$el.children[0].children[1].focus()
           })
         } else {
-          document.removeEventListener('click', this.clickOutside)
+          document.removeEventListener(
+            'click',
+            this.clickOutside,
+            CLICK_OUTSIDE_CAPTURE
+          )
           this.$emit('toggle-dropdown-open', { close: true })
           this.inputText = ''
         }
@@ -668,7 +683,11 @@
         this.inputText = ''
         // 'close: true' is needed in case a box is open and another box is clicked on
         // so this one will close properly
-        document.removeEventListener('click', this.clickOutside)
+        document.removeEventListener(
+          'click',
+          this.clickOutside,
+          CLICK_OUTSIDE_CAPTURE
+        )
         this.$emit('toggle-dropdown-open', { close: true })
       },
       onCustomNameClick() {