From ff69fdacc7dd9bcf6bd17c4a493902d027644d92 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 20 Jan 2022 15:53:25 +0800
Subject: [PATCH] fix(Picker): failed to update modelValue

---
 packages/vant/src/picker/Picker.tsx | 33 +++++++++++++++++++++--------
 packages/vant/src/picker/README.md  |  6 +++---
 packages/vant/src/picker/utils.ts   | 11 +++++++++-
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx
index 29eb63974..a035ffd12 100644
--- a/packages/vant/src/picker/Picker.tsx
+++ b/packages/vant/src/picker/Picker.tsx
@@ -21,6 +21,7 @@ import {
   BORDER_UNSET_TOP_BOTTOM,
 } from '../utils';
 import {
+  isValuesEqual,
   getColumnsType,
   findOptionByValue,
   formatCascadeColumns,
@@ -115,6 +116,14 @@ export default defineComponent({
           fields.value,
           selectedValues
         );
+
+        // reset values after cascading
+        selectedValues.value.forEach((value, index) => {
+          const options = currentColumns.value[index];
+          if (!options.find((option) => option[fields.value.value] === value)) {
+            selectedValues.value[index] = options[0][fields.value.value];
+          }
+        });
       }
 
       emit('change', {
@@ -265,16 +274,22 @@ export default defineComponent({
 
     watch(
       () => props.modelValue,
-      (value) => {
-        selectedValues.value = value;
-      }
+      (newValues) => {
+        if (!isValuesEqual(newValues, selectedValues.value)) {
+          selectedValues.value = newValues;
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      selectedValues,
+      (newValues) => {
+        if (!isValuesEqual(newValues, props.modelValue)) {
+          emit('update:modelValue', selectedValues.value);
+        }
+      },
+      { deep: true }
     );
-
-    watch(selectedValues, () => {
-      if (selectedValues.value !== props.modelValue) {
-        emit('update:modelValue', selectedValues.value);
-      }
-    });
 
     useExpose<PickerExpose>({ confirm });
 
diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md
index cff22077b..7b896f471 100644
--- a/packages/vant/src/picker/README.md
+++ b/packages/vant/src/picker/README.md
@@ -325,9 +325,9 @@ export default {
 
 | Event | Description | Arguments |
 | --- | --- | --- |
-| confirm | Emitted when click confirm button | _{ selectedValues, selectedOptions }_ |
-| cancel | Emitted when click cancel button | _{ selectedValues, selectedOptions }_ |
-| change | Emitted when current option changed | _{ selectedValues, selectedOptions, columnIndex }_ |
+| confirm | Emitted when the confirm button is clicked | _{ selectedValues, selectedOptions }_ |
+| cancel | Emitted when the cancel button is clicked | _{ selectedValues, selectedOptions }_ |
+| change | Emitted when current option is changed | _{ selectedValues, selectedOptions, columnIndex }_ |
 
 ### Slots
 
diff --git a/packages/vant/src/picker/utils.ts b/packages/vant/src/picker/utils.ts
index 4702c2bb7..26a216405 100644
--- a/packages/vant/src/picker/utils.ts
+++ b/packages/vant/src/picker/utils.ts
@@ -70,7 +70,6 @@ export function formatCascadeColumns(
 
     if (!cursor && options.length) {
       const firstValue = getFirstEnabledOption(options)[fields.value];
-      selectedValues.value[columnIndex] = firstValue;
       cursor = findOptionByValue(options, firstValue, fields);
     }
 
@@ -86,3 +85,13 @@ export function getElementTranslateY(element: Element) {
   const translateY = transform.slice(7, transform.length - 1).split(', ')[5];
   return Number(translateY);
 }
+
+export function isValuesEqual(
+  valuesA: Array<string | number>,
+  valuesB: Array<string | number>
+) {
+  return (
+    valuesA.length === valuesB.length &&
+    valuesA.every((value, index) => value === valuesB[index])
+  );
+}