@eturnity/eturnity_reusable_components 7.8.2-EPDM-7779.0 → 7.8.2-EPDM-7779.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.8.2-EPDM-7779.0",
+  "version": "7.8.2-EPDM-7779.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -63,7 +63,7 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector :selectWidth="selectWidth" v-else>
+          <selector :selectWidth="selectorWidth" v-else>
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown">
@@ -142,12 +142,15 @@ import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
 
+const CARET_WIDTH = 30
+const ELLIPSIS_WIDTH = 16
+
 const Caret = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  min-width: 30px;
+  width: ${CARET_WIDTH}px;
+  min-width: ${CARET_WIDTH}px;
   height: 100%;
   align-items: stretch
   cursor: pointer;
@@ -155,10 +158,7 @@ const Caret = styled.div`
 `
 
 const Selector = styled('div', { selectWidth: String })`
-  max-width: ${(props) =>
-    props.selectWidth
-      ? props.selectWidth
-      : '100%'}; // set to same width as the select
+  max-width: ${(props) => props.selectWidth};
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -552,26 +552,27 @@ export default {
           this.$refs.dropdown.$el.scrollTop = topPos
         }
       }
+    },
+    clearSearch() {
+      this.textSearch = ''
     }
   },
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        // this filterRef is needed to check for the # of children on Filter dropdowns
-        const filterRef =
-          this.$refs.dropdown.$children &&
-          this.$refs.dropdown.$children.length > 1
-            ? this.$refs.dropdown.$children
-            : this.$refs.dropdown.$children[0].$children
-            ? this.$refs.dropdown.$children[0].$children
-            : this.$refs.dropdown.$children
-        return filterRef.length
-      } else {
-        return 0
+        return this.$refs.dropdown.$el.childElementCount
       }
+
+      return 0
     },
     isSearchBarVisible() {
-      return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
+      // Removed the optionLength condition, because if there were no result/options when we searched, we still need to show the search input
+      return this.isSearchable && this.isDropdownOpen
+    },
+    selectorWidth() {
+      const currentWidth = this.selectWidth ? this.selectWidth : '100%'
+
+      return `calc(${currentWidth} - ${CARET_WIDTH + ELLIPSIS_WIDTH}px)`
     }
   },
   watch: {