@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.6 → 6.37.0-EPDM-8148.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.37.0-EPDM-8148.6",
+  "version": "6.37.0-EPDM-8148.7",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -408,7 +408,7 @@ export default {
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
-      hoveredValue:null,
+      hoveredValue: null,
       isClickOutsideActive: false
     }
   },
@@ -447,7 +447,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      this.hoveredValue=e
+      this.hoveredValue = e
     },
     mouseEnterHandler() {
       if (this.hoverDropdown) {
@@ -477,10 +477,14 @@ export default {
       this.toggleDropdown()
     },
     clickOutside(event) {
+      const dropdownRef = this.$refs.dropdown
+      // we need to prevent closing on selecting an option, because in the case of
+      // a disabled option, we don't want to close the dropdown
       if (!this.isClickOutsideActive) return
       if (
         this.$refs.select.$el == event.target ||
-        this.$refs.select.$el.contains(event.target)
+        this.$refs.select.$el.contains(event.target) ||
+        event.target.parentNode === dropdownRef.$el
       ) {
         return
       } else {
@@ -502,14 +506,16 @@ export default {
     },
     onArrowPress(dir) {
       let newHoveredElem
-      const currentHoveredElem=this.$refs.dropdown.$el.querySelector(`[data-value="${this.hoveredValue}"]`);
-      if(currentHoveredElem){
-        if(dir>0){
-          newHoveredElem=currentHoveredElem.nextElementSibling
-        }else{
-          newHoveredElem=currentHoveredElem.previousElementSibling
+      const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
+        `[data-value="${this.hoveredValue}"]`
+      )
+      if (currentHoveredElem) {
+        if (dir > 0) {
+          newHoveredElem = currentHoveredElem.nextElementSibling
+        } else {
+          newHoveredElem = currentHoveredElem.previousElementSibling
         }
-        if(newHoveredElem){
+        if (newHoveredElem) {
           this.hoveredValue = newHoveredElem.getAttribute('data-value')
           const topPos = newHoveredElem.offsetTop
           this.$refs.dropdown.$el.scrollTop = topPos

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

@@ -77,6 +77,10 @@ export default {
     },
     hoverText: {
       required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
     }
   },
 
@@ -87,7 +91,12 @@ export default {
   },
   methods: {
     clickHandler() {
-      this.$parent.$emit('option-selected', this.value)
+      if (this.isDisabled) {
+        // prevent emitter if the option is disabled
+        return
+      } else {
+        this.$parent.$emit('option-selected', this.value)
+      }
     },
     hoverHandler() {
       this.$parent.$emit('option-hovered', this.value)