[bugfix] ContactList: not trigger select event when click radio icon (#3218)

packages/contact-card/test/__snapshots__/index.spec.js.snap

@@ -2,6 +2,16 @@
 
 exports[`ContactList render 1`] = `
 <div class="van-contact-list">
-  <div class="van-radio-group van-contact-list__group"></div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
+  <div class="van-radio-group van-contact-list__group">
+    <div class="van-cell van-cell--clickable van-contact-list__item">
+      <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
+        <div class="van-radio">
+          <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
+              <!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">test，123123213</div></span>
+        </div>
+      </div><i class="van-icon van-icon-edit van-contact-list__edit">
+        <!----></i>
+    </div>
+  </div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
 </div>
 `;

packages/contact-card/test/index.spec.js

@@ -43,9 +43,31 @@ describe('ContactCard', () => {
 
 describe('ContactList', () => {
   test('render', () => {
-    const wrapper = mount(ContactList);
+    const wrapper = mount(ContactList, {
+      propsData: {
+        list: [contactInfo]
+      }
+    });
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('select event', () => {
+    const onSelect = jest.fn();
+    const wrapper = mount(ContactList, {
+      propsData: {
+        list: [contactInfo]
+      },
+      context: {
+        on: {
+          select: onSelect
+        }
+      }
+    });
+
+    wrapper.find('.van-radio__icon').trigger('click');
+
+    expect(onSelect).toHaveBeenCalled();
+  });
 });
 
 describe('ContactEdit', () => {

packages/contact-list/index.tsx

@@ -30,7 +30,13 @@ function ContactList(
   slots: DefaultSlots,
   ctx: RenderContext<ContactListProps>
 ) {
-  const List = props.list.map((item, index) => (
+  const List = props.list.map((item, index) => {
+    const onClick = () => {
+      emit(ctx, 'input', item.id);
+      emit(ctx, 'select', item, index);
+    };
+
+    return (
       <Cell
         key={item.id}
         isLink
@@ -38,7 +44,7 @@ function ContactList(
         valueClass={bem('item-value')}
         scopedSlots={{
           default: () => (
-          <Radio name={item.id}>
+            <Radio name={item.id} onClick={onClick}>
               <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
             </Radio>
           ),
@@ -53,12 +59,10 @@ function ContactList(
             />
           )
         }}
-      onClick={() => {
+        onClick={onClick}
-        emit(ctx, 'input', item.id);
-        emit(ctx, 'select', item, index);
-      }}
       />
-  ));
+    );
+  });
 
   return (
     <div class={bem()} {...inherit(ctx)}>

packages/mixins/checkbox.js

@@ -60,16 +60,13 @@ export const CheckboxMixin = (parent, bem) => ({
       <div
         class={bem()}
         onClick={event => {
+          event.stopPropagation();
           this.$emit('click', event);
         }}
       >
         <div
           class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
-          onClick={event => {
+          onClick={this.onClickIcon}
-            event.stopPropagation();
-            this.onClickIcon();
-            this.$emit('click', event);
-          }}
         >
           {CheckIcon}
         </div>