@eturnity/eturnity_reusable_components 1.2.45 → 1.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.45",
+  "version": "1.2.46",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -44,7 +44,7 @@
                 <div v-else>
                     <slot name="selector" :selectedValue="selectedValue"></slot>
                 </div>
-                <Caret :isUp="isDropdownOpen" >
+                <Caret :isUp="isDropdownOpen" @click.stop="toggleCaretDropdown" >
                     <icon name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
                 </Caret>
             </selectButton>
@@ -274,10 +274,12 @@ const InputWrapper = styled('div', inputAttrs)`
         isActive:false,
         textSearch:"",
         hoveredIndex:0,
+        isClickOutsideActive:false,
       }
     },
     mounted(){
         this.selectedValue=this.value
+        document.addEventListener('click', this.clickOutside)
     },
     beforeDestroy(){
         document.removeEventListener('click', this.clickOutside)
@@ -291,23 +293,18 @@ const InputWrapper = styled('div', inputAttrs)`
         },
         toggleDropdown(){
             if(this.isSearchBarVisible){return}
-            this.isDropdownOpen=!this.isDropdownOpen
-            if (this.isDropdownOpen) {
-                document.addEventListener('click', this.clickOutside)
-            } else {
-                document.removeEventListener('click', this.clickOutside)
-            }
-            
+            this.isDropdownOpen=!this.isDropdownOpen            
+        },
+        toggleCaretDropdown(){
+            this.isDropdownOpen=!this.isDropdownOpen            
         },
         openDropdown(){
             this.focus()
             this.isDropdownOpen=true
-            document.addEventListener('click', this.clickOutside)
         },
         closeDropdown(){
             this.blur()
             this.isDropdownOpen=false
-            document.removeEventListener('click', this.clickOutside)
         },
         optionSelected(e){
             this.selectedValue=e
@@ -339,11 +336,16 @@ const InputWrapper = styled('div', inputAttrs)`
                 if(!el.textContent.toLowerCase().includes(value.toLowerCase())){el.style.display='none'}else{el.style.display='inherit'}
             }))
         },
+        onSelectSlotClick(){
+            this.toggleDropdown()
+        },
         clickOutside(event) {
+            if(!this.isClickOutsideActive) return
             if (this.$el==event.target || this.$el.contains(event.target)) {
                 return
-            }
+            }else{
             this.closeDropdown()
+            }
         },
         onKeyDown(e){
             if(e.key=='ArrowDown'){
@@ -380,6 +382,15 @@ const InputWrapper = styled('div', inputAttrs)`
             this.selectedValue=val
         },
         isDropdownOpen(val){
+            if(val){
+                setTimeout(()=>{
+                    this.isClickOutsideActive=true
+                },10)
+            }else{
+                setTimeout(()=>{
+                    this.isClickOutsideActive=false
+                },10)
+            }
             if(val && this.isSearchable){
                 this.$nextTick(()=>{if(this.$refs.searchInput){this.$refs.searchInput.$el.querySelector('input').focus()}})
             }