From c0ea21dcd33eaa17c06e366d0a03ff6c3bca5361 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 2 Oct 2020 21:36:31 +0800
Subject: [PATCH] breaking change(Checkbox): need @click.stop inside a cell
 #7023

---
 docs/markdown/migrate-from-v2.zh-CN.md | 4 ++++
 src/checkbox/Checker.tsx               | 9 +--------
 src/checkbox/README.md                 | 6 +++++-
 src/checkbox/README.zh-CN.md           | 6 +++++-
 src/checkbox/demo/index.vue            | 2 +-
 src/checkbox/index.js                  | 9 +--------
 6 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/docs/markdown/migrate-from-v2.zh-CN.md b/docs/markdown/migrate-from-v2.zh-CN.md
index 81fc58c51..e30950dc4 100644
--- a/docs/markdown/migrate-from-v2.zh-CN.md
+++ b/docs/markdown/migrate-from-v2.zh-CN.md
@@ -172,6 +172,10 @@ Vue 3.0 中增加了 `Teleport` 组件，提供将组件渲染到任意 DOM 位
 - 绿色按钮对应的类型由 `primary` 调整为 `success`
 - `native-type` 的默认值由 `submit` 调整为 `button`
 
+#### Checkbox
+
+- 在 Cell 内部使用时，现在需要手动添加 `@click.stop` 来阻止事件冒泡
+
 #### Dialog
 
 - 默认关闭 `allow-html` 属性
diff --git a/src/checkbox/Checker.tsx b/src/checkbox/Checker.tsx
index c3b4f6b4c..1a8fce040 100644
--- a/src/checkbox/Checker.tsx
+++ b/src/checkbox/Checker.tsx
@@ -64,15 +64,8 @@ export default defineComponent({
 
       if (!disabled.value && (iconClicked || !props.labelDisabled)) {
         emit('toggle');
-
-        // wait for toggle method to complete
-        // so we can get the changed value in the click event listener
-        setTimeout(() => {
-          emit('click', event);
-        });
-      } else {
-        emit('click', event);
       }
+      emit('click', event);
     };
 
     const renderIcon = () => {
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index 3fb56f635..75aa98b4a 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -184,7 +184,11 @@ export default {
       @click="toggle(index)"
     >
       <template #right-icon>
-        <van-checkbox :name="item" :ref="el => checkboxes[index] = el" />
+        <van-checkbox
+          :name="item"
+          :ref="el => checkboxes[index] = el"
+          @click.stop
+        />
       </template>
     </van-cell>
   </van-cell-group>
diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md
index 23865ca42..8922771a6 100644
--- a/src/checkbox/README.zh-CN.md
+++ b/src/checkbox/README.zh-CN.md
@@ -204,7 +204,11 @@ export default {
       @click="toggle(index)"
     >
       <template #right-icon>
-        <van-checkbox :name="item" :ref="el => checkboxes[index] = el" />
+        <van-checkbox
+          :name="item"
+          :ref="el => checkboxes[index] = el"
+          @click.stop
+        />
       </template>
     </van-cell>
   </van-cell-group>
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index a4204b090..74d965398 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -96,7 +96,7 @@
             @click="toggle(index)"
           >
             <template #right-icon>
-              <van-checkbox :ref="setRefs(index)" :name="item" />
+              <van-checkbox :ref="setRefs(index)" :name="item" @click.stop />
             </template>
           </van-cell>
         </van-cell-group>
diff --git a/src/checkbox/index.js b/src/checkbox/index.js
index 1dc3fc5bf..fc3080ac4 100644
--- a/src/checkbox/index.js
+++ b/src/checkbox/index.js
@@ -62,15 +62,8 @@ export default createComponent({
       },
     });
 
-    let toggleTimer;
     const toggle = (newValue = !checked.value) => {
-      // When toggle method is called multiple times at the same time,
-      // only the last call is valid.
-      // This is a hack for usage inside Cell.
-      clearTimeout(toggleTimer);
-      toggleTimer = setTimeout(() => {
-        checked.value = newValue;
-      });
+      checked.value = newValue;
     };
 
     watch(