Merge branch 'master' of https://github.com/Jeremy410/vue-email-dropdown

into cleanup # Conflicts: # src/components/EmailDropdown.vue
DannyFeliz · Jan 18, 2020 · fb66f93 · fb66f93
1 parent 223e007
commit fb66f93
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 34 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,15 +1,13 @@
 <template>
   <div id="app">
-    <form>
       <label>Email:</label>
       <EmailDropdown
-      initialValue=""
-      :closeOnClickOutside="clickOutside"
-      :domains="domains"
-      :maxSuggestions="5"
-      :defaultDomains="defaultDomains"
-    />
-    </form>
+        initialValue=""
+        :closeOnClickOutside="clickOutside"
+        :domains="domains"
+        :maxSuggestions="5"
+        :defaultDomains="defaultDomains"
+      />
   </div>
 </template>
 
@@ -24,6 +22,7 @@ export default {
   data() {
     return {
       clickOutside: false,
+      showCleanButton: true,
       domains: [
         "126.com",
         "139.com",

diff --git a/src/components/EmailDropdown.vue b/src/components/EmailDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="email-dropdown-wrapper" v-click-outside="clickOutsideConfig">
-    <div>
+    <div class="input-button-wrapper">
       <input
         v-bind="$attrs"
         v-on="$listeners"
@@ -18,7 +18,7 @@
         autocomplete="off"
         autocapitalize="off"
       />
-      <button v-if="showCleanButton" @click="clearInput" value="x" />
+      <button type="reset" @click="clearInput" class="clear" />
     </div>
     <div class="email-dropdown-list-container" :class="{ hide: hasclickedOutside }">
       <ul v-if="shouldShowList" class="email-dropdown-list">
@@ -28,14 +28,16 @@
           tabindex="-1"
           :data-dropdown-item-index="index"
           class="email-dropdown-item"
-          :class="{'email-dropdown-item-focus': index === listFocusIndex && !isEmailInputFocused}"
+          :class="{ 'email-dropdown-item-focus': index === listFocusIndex && !isEmailInputFocused }"
           @click="handleOptionSelection(domain)"
           @keyup.esc="handleEscPress"
           @keyup.enter="handleOptionSelection(domain)"
           @keyup.up="handleListNavigation('up')"
           @keyup.down="handleListNavigation('down')"
           @keyup="convertCharToText"
-        >{{ emailWithoutDomain }}@{{ domain }}</li>
+        >
+          {{ emailWithoutDomain }}@{{ domain }}
+        </li>
       </ul>
     </div>
   </div>
@@ -56,10 +58,6 @@ export default {
       type: String,
       default: ""
     },
-    showCleanButton: {
-      type: Boolean,
-      default: false
-    },
     domains: {
       type: Array,
       required: true
@@ -241,9 +239,8 @@ export default {
 
       return shouldFocus;
     },
-    clearInput(e) {
-      e.preventDefault();
-      this.email = '';
+    clearInput() {
+      this.email = "";
     }
   }
 };
@@ -256,6 +253,44 @@ export default {
   justify-content: center;
   align-content: center;
 
+  .input-button-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+  }
+
+  input {
+    text-overflow: ellipsis;
+  }
+
+  .clear {
+    border: 1px solid transparent;
+    background-color: transparent;
+    display: inline-block;
+    vertical-align: middle;
+    outline: 0;
+    cursor: pointer;
+  }
+
+  .clear:after {
+    content: "x";
+    position: absolute;
+    width: 15px;
+    right: 30px;
+    top: 3px;
+    height: 15px;
+    z-index: 1;
+    border-radius: 50%;
+    text-align: center;
+    color: gray;
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  input:valid ~ .clear {
+    display: none;
+  }
+
   .email-dropdown-list-container {
     position: relative;
     height: 0;

diff --git a/tests/unit/email-dropdown.spec.js b/tests/unit/email-dropdown.spec.js
@@ -84,6 +84,18 @@ describe("EmailDropdown.vue", () => {
     expect(wrapper.find(".email-dropdown-item").text()).to.be.equal("hello@gmail.com");
   });
 
+  it("clears the email field when the x is clicked", async () => {
+    const wrapper = shallowMount(EmailDropdown, {
+      propsData
+    });
+
+    wrapper.find("input").setValue("hello");
+    await Vue.nextTick();
+    wrapper.find("button").trigger("click");
+    await Vue.nextTick();
+    expect(wrapper.vm.$refs.email.value).to.be.equal("");
+  });
+
   it("hides suggestion list if remove '@' from the email", async () => {
     const wrapper = shallowMount(EmailDropdown, {
       propsData
@@ -112,21 +124,6 @@ describe("EmailDropdown.vue", () => {
       expect(wrapper.emitted().input[1]).to.have.length(1);
       expect(wrapper.emitted().input[1][0]).to.be.equal("hello@gmail.");
     });
-
-    it("returns 'true' if input is empty after clicking clean (X) button", async () => {
-      propsData.domains = ["gmail.com", "google.com"];
-      propsData.showCleanButton = true;
-
-      const wrapper = shallowMount(EmailDropdown, {
-        propsData
-      });
-
-      wrapper.find("input").setValue("hello");      
-      await Vue.nextTick();
-      wrapper.find("button").trigger("click");      
-      await Vue.nextTick();
-      expect(wrapper.vm.$refs.email.value).to.be.equal('');
-    });
   });
 
   describe("computed", () => {