[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,35 +30,39 @@ function ContactList(
   slots: DefaultSlots,
   ctx: RenderContext<ContactListProps>
 ) {
-  const List = props.list.map((item, index) => (
+  const List = props.list.map((item, index) => {
-    <Cell
+    const onClick = () => {
-      key={item.id}
+      emit(ctx, 'input', item.id);
-      isLink
+      emit(ctx, 'select', item, index);
-      class={bem('item')}
+    };
-      valueClass={bem('item-value')}
+
-      scopedSlots={{
+    return (
-        default: () => (
+      <Cell
-          <Radio name={item.id}>
+        key={item.id}
-            <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
+        isLink
-          </Radio>
+        class={bem('item')}
-        ),
+        valueClass={bem('item-value')}
-        'right-icon': () => (
+        scopedSlots={{
-          <Icon
+          default: () => (
-            name="edit"
+            <Radio name={item.id} onClick={onClick}>
-            class={bem('edit')}
+              <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
-            onClick={event => {
+            </Radio>
-              event.stopPropagation();
+          ),
-              emit(ctx, 'edit', item, index);
+          'right-icon': () => (
-            }}
+            <Icon
-          />
+              name="edit"
-        )
+              class={bem('edit')}
-      }}
+              onClick={event => {
-      onClick={() => {
+                event.stopPropagation();
-        emit(ctx, 'input', item.id);
+                emit(ctx, 'edit', item, index);
-        emit(ctx, 'select', item, index);
+              }}
-      }}
+            />
-    />
+          )
-  ));
+        }}
+        onClick={onClick}
+      />
+    );
+  });
 
   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>