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

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.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -142,23 +142,24 @@ import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
 
+const CARET_WIDTH = '30px'
+const PADDING = '15px'
+const BORDER_WIDTH = '1px'
+
 const Caret = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  min-width: 30px;
+  width: ${CARET_WIDTH};
+  min-width: ${CARET_WIDTH};
   height: 100%;
-  align-items: stretch
+  align-items: stretch;
   cursor: pointer;
   margin-left: auto;
 `
 
 const Selector = styled('div', { selectWidth: String })`
-  max-width: ${(props) =>
-    props.selectWidth
-      ? props.selectWidth
-      : '100%'}; // set to same width as the select
+  max-width: ${(props) => `calc(${props.selectWidth} - (${CARET_WIDTH} + ${PADDING} + (${BORDER_WIDTH} * 2)))`};
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -178,7 +179,7 @@ const optionalLabel = styled.span`
 `
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
-  width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
+  width: ${(props) => props.selectWidth};
   position: relative;
   display: inline-block;
 `
@@ -212,9 +213,8 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
+  ${(props) => (props.isSearchBarVisible ? '' : `padding-left: ${PADDING}` )};
   text-align: left;
-  border-radius: 4px;
   min-height: ${(props) =>
     props.selectHeight
       ? props.selectHeight
@@ -229,7 +229,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   ${({ showBorder, theme, hasError }) =>
     showBorder &&
     `
-    border:1px solid ${hasError ? theme.colors.red : theme.colors.grey4}
+    border: ${BORDER_WIDTH} solid ${hasError ? theme.colors.red : theme.colors.grey4}
   `}
   background-color:${(props) =>
     props.disabled
@@ -247,7 +247,6 @@ const selectDropdownAttrs = {
   hoveredBgColor: String,
   bgColor: String,
   fontColor: String,
-  selectWidth: String,
   optionWidth: String,
   hoveredIndex: Number,
   hoveredValue: Number | String,
@@ -258,7 +257,7 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     z-index:${(props) => (props.isActive ? '2' : '1')};
     position:absolute;
     top:5px;
-    border:1px solid ${(props) => props.theme.colors.grey4}
+    border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius:4px;
     display: flex;
     flex-direction: column;
@@ -325,8 +324,9 @@ export default {
       required: false
     },
     selectWidth: {
+      type: String,
       required: false,
-      default: null
+      default: '100%'
     },
     selectHeight: {
       type: String,
@@ -552,26 +552,22 @@ 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
     }
   },
   watch: {