fix(Picker): should not submit form (#5182)

src/area/test/__snapshots__/demo.spec.js.snap

@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -79,7 +79,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -159,8 +159,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
@@ -216,8 +216,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">

src/area/test/__snapshots__/index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`change option 1`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -32,7 +32,7 @@ exports[`change option 1`] = `
 
 exports[`change option 2`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -62,7 +62,7 @@ exports[`change option 2`] = `
 
 exports[`change option 3`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -92,7 +92,7 @@ exports[`change option 3`] = `
 
 exports[`columns-num prop 1`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -116,7 +116,7 @@ exports[`columns-num prop 1`] = `
 
 exports[`reset method 1`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -145,7 +145,7 @@ exports[`reset method 1`] = `
 
 exports[`reset method 2`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -175,7 +175,7 @@ exports[`reset method 2`] = `
 
 exports[`watch areaList & code 1`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -205,7 +205,7 @@ exports[`watch areaList & code 1`] = `
 
 exports[`watch areaList & code 2`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -235,7 +235,7 @@ exports[`watch areaList & code 2`] = `
 
 exports[`watch areaList & code 3`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">

src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`filter prop 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -61,7 +61,7 @@ exports[`filter prop 1`] = `
 
 exports[`formatter prop 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">

src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`time type 1`] = `
 <div class="van-picker van-datetime-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">

src/datetime-picker/test/__snapshots__/demo.spec.js.snap

@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -164,7 +164,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -242,7 +242,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -285,7 +285,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -375,7 +375,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">

src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`filter prop 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -33,7 +33,7 @@ exports[`filter prop 1`] = `
 
 exports[`format initial value 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -57,7 +57,7 @@ exports[`format initial value 1`] = `
 
 exports[`formatter prop 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -88,7 +88,7 @@ exports[`formatter prop 1`] = `
 
 exports[`max-hour & max-minute 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">

src/picker/index.js

@@ -63,7 +63,12 @@ export default createComponent({
 
     onChange(columnIndex) {
       if (this.simple) {
-        this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0));
+        this.$emit(
+          'change',
+          this,
+          this.getColumnValue(0),
+          this.getColumnIndex(0)
+        );
       } else {
         this.$emit('change', this, this.getValues(), columnIndex);
       }
@@ -105,7 +110,10 @@ export default createComponent({
     // set options of column by index
     setColumnValues(index, options) {
       const column = this.children[index];
-      if (column && JSON.stringify(column.options) !== JSON.stringify(options)) {
+      if (
+        column &&
+        JSON.stringify(column.options) !== JSON.stringify(options)
+      ) {
         column.options = options;
         column.setIndex(0);
       }
@@ -142,13 +150,70 @@ export default createComponent({
 
     onCancel() {
       this.emit('cancel');
+    },
+
+    genTitle() {
+      const titleSlot = this.slots('title');
+
+      if (titleSlot) {
+        return titleSlot;
+      }
+
+      if (this.title) {
+        return <div class={['van-ellipsis', bem('title')]}>{this.title}</div>;
+      }
+    },
+
+    genToolbar() {
+      if (this.showToolbar) {
+        return (
+          <div class={[BORDER_TOP_BOTTOM, bem('toolbar')]}>
+            {this.slots() || [
+              <button
+                type="button"
+                class={bem('cancel')}
+                onClick={this.onCancel}
+              >
+                {this.cancelButtonText || t('cancel')}
+              </button>,
+              this.genTitle(),
+              <button
+                type="button"
+                class={bem('confirm')}
+                onClick={this.onConfirm}
+              >
+                {this.confirmButtonText || t('confirm')}
+              </button>
+            ]}
+          </div>
+        );
+      }
+    },
+
+    genColumns() {
+      const columns = this.simple ? [this.columns] : this.columns;
+
+      return columns.map((item, index) => (
+        <PickerColumn
+          valueKey={this.valueKey}
+          allowHtml={this.allowHtml}
+          className={item.className}
+          itemHeight={this.itemHeight}
+          defaultIndex={item.defaultIndex || this.defaultIndex}
+          swipeDuration={this.swipeDuration}
+          visibleItemCount={this.visibleItemCount}
+          initialOptions={this.simple ? item : item.values}
+          onChange={() => {
+            this.onChange(index);
+          }}
+        />
+      ));
     }
   },
 
   render(h) {
     const { itemHeight } = this;
     const wrapHeight = itemHeight * this.visibleItemCount;
-    const columns = this.simple ? [this.columns] : this.columns;
 
     const frameStyle = {
       height: `${itemHeight}px`
@@ -162,49 +227,25 @@ export default createComponent({
       backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
     };
 
-    const Toolbar = this.showToolbar && (
-      <div class={[BORDER_TOP_BOTTOM, bem('toolbar')]}>
-        {this.slots() || [
-          <button class={bem('cancel')} onClick={this.onCancel}>
-            {this.cancelButtonText || t('cancel')}
-          </button>,
-          this.slots('title') ||
-            (this.title && (
-              <div class={['van-ellipsis', bem('title')]}>{this.title}</div>
-            )),
-          <button class={bem('confirm')} onClick={this.onConfirm}>
-            {this.confirmButtonText || t('confirm')}
-          </button>
-        ]}
-      </div>
-    );
-
     return (
       <div class={bem()}>
-        {this.toolbarPosition === 'top' ? Toolbar : h()}
+        {this.toolbarPosition === 'top' ? this.genToolbar() : h()}
         {this.loading ? <Loading class={bem('loading')} /> : h()}
         {this.slots('columns-top')}
-        <div class={bem('columns')} style={columnsStyle} onTouchmove={preventDefault}>
+        <div
-          {columns.map((item, index) => (
+          class={bem('columns')}
-            <PickerColumn
+          style={columnsStyle}
-              valueKey={this.valueKey}
+          onTouchmove={preventDefault}
-              allowHtml={this.allowHtml}
+        >
-              className={item.className}
+          {this.genColumns()}
-              itemHeight={this.itemHeight}
-              defaultIndex={item.defaultIndex || this.defaultIndex}
-              swipeDuration={this.swipeDuration}
-              visibleItemCount={this.visibleItemCount}
-              initialOptions={this.simple ? item : item.values}
-              onChange={() => {
-                this.onChange(index);
-              }}
-            />
-          ))}
           <div class={bem('mask')} style={maskStyle} />
-          <div class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]} style={frameStyle} />
+          <div
+            class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
+            style={frameStyle}
+          />
         </div>
         {this.slots('columns-bottom')}
-        {this.toolbarPosition === 'bottom' ? Toolbar : h()}
+        {this.toolbarPosition === 'bottom' ? this.genToolbar() : h()}
       </div>
     );
   }

src/picker/test/__snapshots__/demo.spec.js.snap

@@ -42,8 +42,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">

src/picker/test/__snapshots__/index.spec.js.snap

@@ -30,7 +30,7 @@ exports[`column watch default index 2`] = `
 
 exports[`columns-top、columns-bottom prop 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->Custom Columns Top<div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
     <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
@@ -57,7 +57,7 @@ exports[`not allow html 1`] = `
 
 exports[`render title slot 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>Custom title<button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -75,6 +75,6 @@ exports[`toolbar-position prop 1`] = `
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
     <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
 </div>
 `;