Merge pull request #26 from DannyFeliz/remove-clearable-option

Get rid of the clear option
DannyFeliz · Jan 26, 2020 · 03ae7b5 · 03ae7b5
2 parents f6fd9e3 + 3e994dd
commit 03ae7b5
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 60 deletions.
diff --git a/src/components/EmailDropdown.vue b/src/components/EmailDropdown.vue
@@ -7,7 +7,7 @@
         ref="email"
         type="email"
         :value="email"
-        :class="[inputClasses, {'is-clearable' : isClearable}]"
+        :class="inputClasses"
         @focus="handleEmailInputFocus"
         @input="handleInputEvent"
         @keyup.up="handleListNavigation('up')"
@@ -17,9 +17,6 @@
         autocomplete="off"
         autocapitalize="off"
       />
-      <button v-if="isClearable" @click="clearInput" tabindex="-1">
-        <span>&times;</span>
-      </button>
     </div>
     <div :class="emailDropdownContainerClasses">
       <ul v-if="shouldShowList" class="email-dropdown-list">
@@ -90,10 +87,6 @@ export default {
     inputClasses: {
       type: [String, Array, Object],
       default: ""
-    },
-    clearable: {
-      type: Boolean,
-      default: false
     }
   },
   data() {
@@ -124,8 +117,7 @@ export default {
     emailDropdownContainerClasses() {
       return {
         "email-dropdown-list-container": true,
-        hide: this.hasclickedOutside,
-        "is-clearable": this.isClearable
+        hide: this.hasclickedOutside
       };
     },
     domain() {
@@ -154,9 +146,6 @@ export default {
         .filter(domain => domain.startsWith(this.domain))
         .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
         .slice(0, this.maxSuggestions);
-    },
-    isClearable() {
-      return Boolean(this.clearable && this.email.trim());
     }
   },
   watch: {
@@ -244,10 +233,6 @@ export default {
       }
 
       return shouldFocus;
-    },
-    clearInput() {
-      this.email = "";
-      this.$refs.email.focus();
     }
   }
 };
@@ -271,11 +256,6 @@ export default {
     width: 100%;
     padding-right: 0;
     margin-right: -4px;
-
-    &.is-clearable {
-      padding-right: 13px;
-      margin-right: 0;
-    }
   }
 
   button {
@@ -296,10 +276,6 @@ export default {
     position: relative;
     height: 0;
 
-    &.is-clearable {
-      margin-right: -4px;
-    }
-
     &.hide {
       display: none;
     }

diff --git a/tests/unit/email-dropdown.spec.js b/tests/unit/email-dropdown.spec.js
@@ -17,8 +17,7 @@ describe("EmailDropdown.vue", () => {
       domains: ["google.com"],
       defaultDomains: ["hotmail.com", "outlook.com"],
       maxSuggestions: 4,
-      closeOnClickOutside: true,
-      clearable: false
+      closeOnClickOutside: true
     };
   });
 
@@ -96,38 +95,6 @@ describe("EmailDropdown.vue", () => {
     expect(wrapper.find(".email-dropdown-list").exists()).to.be.false;
   });
 
-  it("clears the email field when the x is clicked", async () => {
-    propsData.initialValue = "hello";
-    propsData.clearable = true;
-    const wrapper = shallowMount(EmailDropdown, {
-      propsData
-    });
-
-    wrapper.find("button").trigger("click");
-    await Vue.nextTick();
-    expect(wrapper.vm.$data.email).to.be.empty;
-  });
-
-  it("hides the x if the email field is clearable but empty", async () => {
-    propsData.initialValue = "";
-    propsData.clearable = true;
-    const wrapper = shallowMount(EmailDropdown, {
-      propsData
-    });
-
-    expect(wrapper.find("button").exists()).to.be.false;
-  });
-
-  it("hides the x if the input not clearable", async () => {
-    propsData.initialValue = "hello";
-    propsData.clearable = false;
-    const wrapper = shallowMount(EmailDropdown, {
-      propsData
-    });
-
-    expect(wrapper.find("button").exists()).to.be.false;
-  });
-
   describe("events", () => {
     it("emits 'input' on email change", async () => {
       propsData.domains = ["gmail.com", "google.com"];