fix: prevent button triggering external form submit (mengxiong10#389)

lleizh · Dec 6, 2019 · 664d829 · 664d829
1 parent cf4139b
commit 664d829
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 1 deletion.
diff --git a/__test__/__snapshots__/calendar-panel.test.js.snap b/__test__/__snapshots__/calendar-panel.test.js.snap
@@ -9,6 +9,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
   >
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-left"
+      type="button"
     >
       <i
         class="mx-icon-double-left"
@@ -17,6 +18,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
      
     <button
       class="mx-btn mx-btn-text mx-btn-icon-left"
+      type="button"
     >
       <i
         class="mx-icon-left"
@@ -25,6 +27,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
      
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-right"
+      type="button"
     >
       <i
         class="mx-icon-double-right"
@@ -33,6 +36,7 @@ exports[`CalendarPanel prop: type=date 1`] = `
      
     <button
       class="mx-btn mx-btn-text mx-btn-icon-right"
+      type="button"
     >
       <i
         class="mx-icon-right"
@@ -44,13 +48,15 @@ exports[`CalendarPanel prop: type=date 1`] = `
     >
       <button
         class="mx-btn mx-btn-text mx-btn-current-month"
+        type="button"
       >
         
           Oct
         
       </button>
       <button
         class="mx-btn mx-btn-text mx-btn-current-year"
+        type="button"
       >
         
           2019
@@ -93,6 +99,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
   >
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-left"
+      type="button"
     >
       <i
         class="mx-icon-double-left"
@@ -102,6 +109,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
     <button
       class="mx-btn mx-btn-text mx-btn-icon-left"
       style="display: none;"
+      type="button"
     >
       <i
         class="mx-icon-left"
@@ -110,6 +118,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
      
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-right"
+      type="button"
     >
       <i
         class="mx-icon-double-right"
@@ -119,6 +128,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
     <button
       class="mx-btn mx-btn-text mx-btn-icon-right"
       style="display: none;"
+      type="button"
     >
       <i
         class="mx-icon-right"
@@ -130,6 +140,7 @@ exports[`CalendarPanel prop: type=month 1`] = `
     >
       <button
         class="mx-btn mx-btn-text"
+        type="button"
       >
         
         2019
@@ -165,6 +176,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
   >
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-left"
+      type="button"
     >
       <i
         class="mx-icon-double-left"
@@ -174,6 +186,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
     <button
       class="mx-btn mx-btn-text mx-btn-icon-left"
       style="display: none;"
+      type="button"
     >
       <i
         class="mx-icon-left"
@@ -182,6 +195,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
      
     <button
       class="mx-btn mx-btn-text mx-btn-icon-double-right"
+      type="button"
     >
       <i
         class="mx-icon-double-right"
@@ -191,6 +205,7 @@ exports[`CalendarPanel prop: type=year 1`] = `
     <button
       class="mx-btn mx-btn-text mx-btn-icon-right"
       style="display: none;"
+      type="button"
     >
       <i
         class="mx-icon-right"

diff --git a/__test__/date-picker.test.js b/__test__/date-picker.test.js
@@ -325,4 +325,18 @@ describe('DatePicker', () => {
     el.trigger('click');
     expect(wrapper.emitted().close).toBeTruthy();
   });
+
+  // present the button submit form
+  it('the type of all buttons should be button', () => {
+    wrapper = mount(DatePicker, {
+      propsData: {
+        open: true,
+        showTimePanel: true,
+      },
+    });
+    const els = wrapper.findAll('button');
+    els.wrappers.forEach(v => {
+      expect(v.element.type).toBe('button');
+    });
+  });
 });
diff --git a/src/calendar/calendar-panel.vue b/src/calendar/calendar-panel.vue
@@ -9,27 +9,31 @@
     <div class="mx-calendar-header">
       <button
         v-show="showIconDoubleArrow"
+        type="button"
         class="mx-btn mx-btn-text mx-btn-icon-double-left"
         @click="handleIconDoubleLeftClick"
       >
         <i class="mx-icon-double-left"></i>
       </button>
       <button
         v-show="showIconArrow"
+        type="button"
         class="mx-btn mx-btn-text mx-btn-icon-left"
         @click="handleIconLeftClick"
       >
         <i class="mx-icon-left"></i>
       </button>
       <button
         v-show="showIconDoubleArrow"
+        type="button"
         class="mx-btn mx-btn-text mx-btn-icon-double-right"
         @click="handleIconDoubleRightClick"
       >
         <i class="mx-icon-double-right"></i>
       </button>
       <button
         v-show="showIconArrow"
+        type="button"
         class="mx-btn mx-btn-text mx-btn-icon-right"
         @click="handleIconRightClick"
       >
@@ -43,6 +47,7 @@
         </template>
         <button
           v-else-if="panel === 'month'"
+          type="button"
           class="mx-btn mx-btn-text"
           @click="handelPanelChange('year')"
         >
@@ -52,6 +57,7 @@
           <button
             v-for="item in dateHeader"
             :key="item.panel"
+            type="button"
             :class="`mx-btn mx-btn-text mx-btn-current-${item.panel}`"
             @click="handelPanelChange(item.panel)"
           >

diff --git a/src/time/time-panel.vue b/src/time/time-panel.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="mx-time">
     <div v-if="showTimeHeader" class="mx-time-header">
-      <button class="mx-btn mx-btn-text mx-time-header-title" @click="handleClickTitle">
+      <button
+        type="button"
+        class="mx-btn mx-btn-text mx-time-header-title"
+        @click="handleClickTitle"
+      >
         {{ title }}
       </button>
     </div>