fix: should click twice to open popup in mobile (#725)

__test__/__snapshots__/date-picker.test.js.snap

@@ -87,11 +87,6 @@ exports[`DatePicker prop: editable 1`] = `
       readonly="readonly"
       type="text"
     />
-    <i
-      class="mx-icon-clear"
-    >
-      <anonymous-stub />
-    </i>
     <i
       class="mx-icon-calendar"
     >

__test__/date-picker.test.js

@@ -17,7 +17,7 @@ describe('DatePicker', () => {
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
     // expect click input should show the popup
     const input = wrapper.find('input');
-    await input.trigger('mousedown');
+    await input.trigger('click');
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
     // expect click out side should hide the popup
     const bodyWrapper = createWrapper(document.body);
@@ -296,28 +296,31 @@ describe('DatePicker', () => {
     expect(popup.element.parentNode).toBe(document.body);
   });
 
-  it('feat: should emit clear event when click clear button', () => {
+  it('feat: should emit clear event when click clear button', async () => {
     wrapper = shallowMount(DatePicker, {
       propsData: {
         value: new Date(2019, 10, 9),
       },
     });
+    await wrapper.find('.mx-input-wrapper').trigger('mouseenter');
     const clearButton = wrapper.find('.mx-icon-clear');
-    clearButton.trigger('mousedown');
+
+    clearButton.trigger('click');
     const emitted = wrapper.emitted();
     expect(emitted.clear).toBeTruthy();
     expect(emitted.input[0][0]).toBe(null);
   });
 
-  it('feat: should emit [null, null] when clear range', () => {
+  it('feat: should emit [null, null] when clear range', async () => {
     wrapper = shallowMount(DatePicker, {
       propsData: {
         range: true,
         value: [new Date(2019, 10, 9), new Date(2019, 11, 9)],
       },
     });
+    await wrapper.find('.mx-input-wrapper').trigger('mouseenter');
     const clearButton = wrapper.find('.mx-icon-clear');
-    clearButton.trigger('mousedown');
+    clearButton.trigger('click');
     const emitted = wrapper.emitted();
     expect(emitted.input[0][0]).toEqual([null, null]);
   });

src/date-picker.js

@@ -140,6 +140,7 @@ export default {
       currentValue: null,
       userInput: null,
       defaultOpen: false,
+      mouseInInput: false,
     };
   },
   computed: {
@@ -188,7 +189,7 @@ export default {
       return this.formatDate(this.innerValue);
     },
     showClearIcon() {
-      return !this.disabled && this.clearable && this.text;
+      return !this.disabled && this.clearable && this.text && this.mouseInInput;
     },
     locale() {
       if (isObject(this.lang)) {
@@ -224,6 +225,12 @@ export default {
     }
   },
   methods: {
+    handleMouseEnter() {
+      this.mouseInInput = true;
+    },
+    handleMouseLeave() {
+      this.mouseInInput = false;
+    },
     handleClickOutSide(evt) {
       const { target } = evt;
       if (!this.$el.contains(target)) {
@@ -475,25 +482,25 @@ export default {
         }
       );
       const calendarIcon = this.type === 'time' ? <IconTime /> : <IconCalendar />;
+      // remove touchstart event to avoid opens the popup while scrolling in mobile #469
       return (
         <div
           class={`${prefixClass}-input-wrapper`}
-          onMousedown={this.openPopup}
-          onTouchstart={this.openPopup}
+          onMouseenter={this.handleMouseEnter}
+          onMouseleave={this.handleMouseLeave}
+          onClick={this.openPopup}
+          ref="inputWrapper"
         >
           {input}
           {this.showClearIcon ? (
-            <i
-              class={`${prefixClass}-icon-clear`}
-              onMousedown={this.handleClear}
-              onTouchstart={this.handleClear}
-            >
+            <i class={`${prefixClass}-icon-clear`} onClick={this.handleClear}>
               {this.renderSlot('icon-clear', <IconClose />)}
             </i>
-          ) : null}
-          <i class={`${prefixClass}-icon-calendar`}>
-            {this.renderSlot('icon-calendar', calendarIcon)}
-          </i>
+          ) : (
+            <i class={`${prefixClass}-icon-calendar`}>
+              {this.renderSlot('icon-calendar', calendarIcon)}
+            </i>
+          )}
         </div>
       );
     },

src/style/index.scss

@@ -27,17 +27,6 @@
 
 .#{$namespace}-input-wrapper {
   position: relative;
-  .#{$namespace}-icon-clear {
-    display: none;
-  }
-  &:hover {
-    .#{$namespace}-icon-clear {
-      display: block;
-    }
-    .#{$namespace}-icon-clear + .#{$namespace}-icon-calendar {
-      display: none;
-    }
-  }
 }
 
 .#{$namespace}-input {