fix(checkbox, radio, slider, switch): fixed onChange event emit timing

Author: haoziqaq

packages/varlet-ui/src/checkbox-group/__tests__/index.spec.js

@@ -77,6 +77,29 @@ test('checkbox onClick & onChange', async () => {
   wrapper.unmount()
 })
 
+test('checkbox emits update before change', async () => {
+  const calls = []
+  const onUpdateModelValue = vi.fn((value) => {
+    calls.push('update')
+    wrapper.setProps({ modelValue: value })
+  })
+  const onChange = vi.fn(() => calls.push('change'))
+
+  const wrapper = mount(VarCheckbox, {
+    props: {
+      modelValue: false,
+      onChange,
+      'onUpdate:modelValue': onUpdateModelValue,
+    },
+  })
+
+  await wrapper.find('.var-checkbox').trigger('click')
+
+  expect(calls).toStrictEqual(['update', 'change'])
+
+  wrapper.unmount()
+})
+
 test('checkbox toggle method', async () => {
   const onUpdateModelValue = vi.fn((value) => wrapper.setProps({ modelValue: value }))
 
@@ -188,6 +211,39 @@ test('checkbox with checkbox group', async () => {
   wrapper.unmount()
 })
 
+test('checkbox group emits update before child change', async () => {
+  const wrapper = mount({
+    components: {
+      [VarCheckboxGroup.name]: VarCheckboxGroup,
+      [VarCheckbox.name]: VarCheckbox,
+    },
+    data: () => ({
+      value: [],
+      calls: [],
+    }),
+    methods: {
+      handleUpdate(value) {
+        this.value = value
+        this.calls.push('update')
+      },
+      handleChange() {
+        this.calls.push('change')
+      },
+    },
+    template: `
+      <var-checkbox-group :model-value="value" @update:model-value="handleUpdate">
+        <var-checkbox :checked-value="1" @change="handleChange" />
+      </var-checkbox-group>
+    `,
+  })
+
+  await wrapper.find('.var-checkbox').trigger('click')
+
+  expect(wrapper.vm.calls).toStrictEqual(['update', 'change'])
+
+  wrapper.unmount()
+})
+
 test('checkbox validation', async () => {
   const onUpdateModelValue = vi.fn((value) => wrapper.setProps({ modelValue: value }))
 

packages/varlet-ui/src/checkbox/Checkbox.vue

@@ -123,16 +123,17 @@ export default defineComponent({
       })
     }
 
-    function change(changedValue: any) {
+    async function change(changedValue: any) {
       const { checkedValue, onChange } = props
 
       value.value = changedValue
-      call(onChange, value.value, isIndeterminate.value)
-      validateWithTrigger('onChange')
       changedValue === checkedValue ? checkboxGroup?.onChecked(checkedValue) : checkboxGroup?.onUnchecked(checkedValue)
+      await nextTick()
+      call(onChange, changedValue, isIndeterminate.value)
+      validateWithTrigger('onChange')
     }
 
-    function handleClick(e: Event) {
+    async function handleClick(e: Event) {
       const { disabled, readonly, checkedValue, uncheckedValue, onClick } = props
 
       if (form?.disabled.value || disabled) {
@@ -147,6 +148,7 @@ export default defineComponent({
 
       if (isIndeterminate.value === true) {
         isIndeterminate.value = false
+        await nextTick()
         call(props.onChange, value.value, isIndeterminate.value)
         validateWithTrigger('onChange')
         return

packages/varlet-ui/src/radio-group/__tests__/index.spec.js

@@ -77,6 +77,29 @@ test('radio onClick & onChange', async () => {
   wrapper.unmount()
 })
 
+test('radio emits update before change', async () => {
+  const calls = []
+  const onUpdateModelValue = vi.fn((value) => {
+    calls.push('update')
+    wrapper.setProps({ modelValue: value })
+  })
+  const onChange = vi.fn(() => calls.push('change'))
+
+  const wrapper = mount(VarRadio, {
+    props: {
+      modelValue: false,
+      onChange,
+      'onUpdate:modelValue': onUpdateModelValue,
+    },
+  })
+
+  await wrapper.find('.var-radio').trigger('click')
+
+  expect(calls).toStrictEqual(['update', 'change'])
+
+  wrapper.unmount()
+})
+
 test('radio toggle method', async () => {
   const onUpdateModelValue = vi.fn((value) => wrapper.setProps({ modelValue: value }))
 
@@ -172,6 +195,40 @@ test('radio with radio group', async () => {
   wrapper.unmount()
 })
 
+test('radio group emits update before child change', async () => {
+  const wrapper = mount({
+    components: {
+      [VarRadioGroup.name]: VarRadioGroup,
+      [VarRadio.name]: VarRadio,
+    },
+    data: () => ({
+      value: 2,
+      calls: [],
+    }),
+    methods: {
+      handleUpdate(value) {
+        this.value = value
+        this.calls.push('update')
+      },
+      handleChange() {
+        this.calls.push('change')
+      },
+    },
+    template: `
+      <var-radio-group :model-value="value" @update:model-value="handleUpdate">
+        <var-radio :checked-value="1" @change="handleChange" />
+        <var-radio :checked-value="2" />
+      </var-radio-group>
+    `,
+  })
+
+  await wrapper.find('.var-radio').trigger('click')
+
+  expect(wrapper.vm.calls).toStrictEqual(['update', 'change'])
+
+  wrapper.unmount()
+})
+
 test('radio validation', async () => {
   const onUpdateModelValue = vi.fn((value) => wrapper.setProps({ modelValue: value }))
 

packages/varlet-ui/src/radio/Radio.vue

@@ -174,17 +174,17 @@ export default defineComponent({
       })
     }
 
-    function change(changedValue: any) {
+    async function change(changedValue: any) {
       const { checkedValue, onChange } = props
 
       if (radioGroup && value.value === checkedValue) {
         return
       }
 
       value.value = changedValue
-
-      call(onChange, value.value)
       radioGroup?.onToggle(checkedValue)
+      await nextTick()
+      call(onChange, changedValue)
       validateWithTrigger('onChange')
     }
 

packages/varlet-ui/src/slider/Slider.vue

@@ -313,8 +313,8 @@ export default defineComponent({
     }
 
     function emitChange(value: number | number[]) {
-      call(props.onChange, value)
       call(props['onUpdate:modelValue'], value)
+      call(props.onChange, value)
       validateWithTrigger()
     }
 

packages/varlet-ui/src/slider/__tests__/index.spec.js

@@ -211,6 +211,32 @@ describe('test slider props', () => {
     wrapper.unmount()
   })
 
+  test('slider emits update before change', async () => {
+    const calls = []
+    const onUpdateModelValue = vi.fn((value) => {
+      calls.push('update')
+      wrapper.setProps({ modelValue: value })
+    })
+    const onChange = vi.fn(() => calls.push('change'))
+
+    const wrapper = mount(VarSlider, {
+      props: {
+        modelValue: 0,
+        onChange,
+        'onUpdate:modelValue': onUpdateModelValue,
+      },
+    })
+
+    const el = wrapper.find('.var-slider__horizontal-thumb')
+    await trigger(el, 'touchstart', 0, 0)
+    await trigger(document, 'touchmove', 50, 0)
+    await trigger(document, 'touchend', 50, 0)
+
+    expect(calls).toStrictEqual(['update', 'change'])
+
+    wrapper.unmount()
+  })
+
   test('thumbSize prop', () => {
     const wrapper = mount(VarSlider, {
       props: {

packages/varlet-ui/src/switch/Switch.vue

@@ -213,8 +213,8 @@ export default defineComponent({
           validateWithTrigger('onLazyChange')
         })
       } else {
-        call(onChange, newValue)
         call(updateModelValue, newValue)
+        call(onChange, newValue)
         validateWithTrigger('onChange')
       }
     }

packages/varlet-ui/src/switch/__tests__/index.spec.js

@@ -164,6 +164,38 @@ describe('test switch events', () => {
     wrapper.unmount()
   })
 
+  test('switch emits update before change', async () => {
+    const calls = []
+
+    const wrapper = mount({
+      components: {
+        [VarSwitch.name]: VarSwitch,
+      },
+      data() {
+        return {
+          value: true,
+          calls,
+        }
+      },
+      methods: {
+        handleUpdate(value) {
+          this.value = value
+          this.calls.push('update')
+        },
+        handleChange() {
+          this.calls.push('change')
+        },
+      },
+      template: `<var-switch :model-value="value" @update:model-value="handleUpdate" @change="handleChange" />`,
+    })
+
+    await wrapper.find('.var-switch__block').trigger('click')
+
+    expect(calls).toStrictEqual(['update', 'change'])
+
+    wrapper.unmount()
+  })
+
   test('switch event not trigger', async () => {
     const clickFn = vi.fn()
     const changeFn = vi.fn()