fix(comp:cascader): onChange not working (#1528)

IDuxFE · Apr 9, 2023 · c045d47 · c045d47
1 parent dbd20fc
commit c045d47
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/packages/components/cascader/__tests__/cascader.spec.ts b/packages/components/cascader/__tests__/cascader.spec.ts
@@ -158,28 +158,30 @@ describe('Cascader', () => {
       const onChange = vi.fn()
       const wrapper = CascaderMount({
         props: {
+          value: undefined,
           open: true,
           'onUpdate:value': onUpdateValue,
           onChange,
         },
       })
 
-      expect(wrapper.find('.ix-selector-item').text()).toBe('Components/General/Button')
-
-      await wrapper.setProps({ value: undefined })
-
-      expect(wrapper.find('.ix-selector-item').exists()).toBe(false)
+      expect(wrapper.find('.ix-selector-item').exists()).toBeFalsy()
 
+      await getAllOptionGroup(wrapper)[1].find('.ix-cascader-option').trigger('click')
       await getAllOptionGroup(wrapper)[2].find('.ix-cascader-option').trigger('click')
 
-      // expect(onUpdateValue).toBeCalledWith(['components', 'general', 'button'])
-      // expect(onChange).toBeCalledWith(['components', 'general', 'button'], undefined)
+      expect(onUpdateValue).toBeCalledWith(['components', 'general', 'button'])
+      expect(onChange).toBeCalledWith(['components', 'general', 'button'], undefined)
 
       await wrapper.setProps({ value: ['components', 'general', 'button'] })
-      await getAllOptionGroup(wrapper)[2].find('.ix-cascader-option').trigger('click')
 
-      // expect(onUpdateValue).toBeCalledWith(['pro', 'pro-layout'])
-      // expect(onChange).toBeCalledWith(['pro', 'pro-layout'], ['components', 'general', 'button'])
+      expect(wrapper.find('.ix-selector-item').text()).toBe('Components/General/Button')
+
+      await await wrapper.setProps({ expandedKeys: ['pro'] })
+      await getAllOptionGroup(wrapper)[1].find('.ix-cascader-option').trigger('click')
+
+      expect(onUpdateValue).toBeCalledWith(['pro', 'pro-layout'])
+      expect(onChange).toBeCalledWith(['pro', 'pro-layout'], ['components', 'general', 'button'])
     })
 
     test('v-model:expandedKeys work', async () => {
@@ -255,31 +257,33 @@ describe('Cascader', () => {
       const onChange = vi.fn()
       const wrapper = CascaderMount({
         props: {
+          value: undefined,
           open: true,
           'onUpdate:value': onUpdateValue,
           onChange,
         },
       })
 
-      expect(wrapper.findAll('.ix-selector-item').length).toBe(2)
+      expect(wrapper.find('.ix-selector-item').exists()).toBeFalsy()
 
       await wrapper.setProps({ value: [['components', 'general', 'button']] })
 
       expect(wrapper.findAll('.ix-selector-item').length).toBe(1)
 
-      await getAllOptionGroup(wrapper)[2].find('.ix-cascader-option').trigger('click')
-
-      // expect(onUpdateValue).toBeCalledWith([
-      //   ['components', 'general', 'button'],
-      //   ['pro', 'pro-layout'],
-      // ])
-      // expect(onChange).toBeCalledWith(
-      //   [
-      //     ['components', 'general', 'button'],
-      //     ['pro', 'pro-layout'],
-      //   ],
-      //   [['components', 'general', 'button']],
-      // )
+      await await wrapper.setProps({ expandedKeys: ['pro'] })
+      await getAllOptionGroup(wrapper)[1].find('.ix-cascader-option').trigger('click')
+
+      expect(onUpdateValue).toBeCalledWith([
+        ['components', 'general', 'button'],
+        ['pro', 'pro-layout'],
+      ])
+      expect(onChange).toBeCalledWith(
+        [
+          ['components', 'general', 'button'],
+          ['pro', 'pro-layout'],
+        ],
+        [['components', 'general', 'button']],
+      )
     })
   })
 })
diff --git a/packages/components/cascader/src/Cascader.tsx b/packages/components/cascader/src/Cascader.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { computed, defineComponent, normalizeClass, provide, ref, toRef, watch } from 'vue'
+import { computed, defineComponent, normalizeClass, provide, ref, toRaw, toRef, watch } from 'vue'
 
 import { useAccessorAndControl } from '@idux/cdk/forms'
 import { type VKey, callEmit, useState } from '@idux/cdk/utils'
@@ -69,7 +69,12 @@ export default defineComponent({
       toRef(props, 'multiple'),
       toRef(props, 'strategy'),
       toRef(accessor, 'value'),
-      keys => accessor.setValue(keys),
+      keys => {
+        const oldKeys = toRaw(accessor.value)
+        accessor.setValue(keys)
+
+        callEmit(props.onChange, keys, oldKeys)
+      },
     )
     const { resolvedSelectedKeys, setValue } = selectedStateContext
     const selectedData = useSelectedData(resolvedSelectedKeys, mergedDataMap)