From a195eb55341b9a48d5c7950c93aa4fbaeb05e78e Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 26 Feb 2025 14:24:35 +0800 Subject: [PATCH 1/6] fix(Picker): should reset the second argument when the first argument is changed somehow --- packages/vant/src/picker/Picker.tsx | 12 ++++- packages/vant/src/picker/test/index.spec.tsx | 57 ++++++++++++++++++++ 2 files changed, 68 insertions(+), 1 deletion(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 001cd763dfd..7e044853f3b 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -153,12 +153,22 @@ export default defineComponent({ }); const onChange = (value: Numeric, columnIndex: number) => { - setValue(columnIndex, value); + if (columnsType.value === 'cascade') { + setValue( + columnIndex, + currentColumns.value[columnIndex].length + ? currentColumns.value[columnIndex][0][fields.value.value] + : undefined, + ); + } else { + setValue(columnIndex, value); + } if (columnsType.value === 'cascade') { // reset values after cascading selectedValues.value.forEach((value, index) => { const options = currentColumns.value[index]; + if (!isOptionExist(options, value, fields.value)) { setValue( index, diff --git a/packages/vant/src/picker/test/index.spec.tsx b/packages/vant/src/picker/test/index.spec.tsx index 17ecdab9253..507e7866c53 100644 --- a/packages/vant/src/picker/test/index.spec.tsx +++ b/packages/vant/src/picker/test/index.spec.tsx @@ -440,3 +440,60 @@ test('should render empty slot when options is empty', async () => { await wrapper.setProps({ columns: [{ values: ['foo'] }] }); expect(wrapper.html()).not.toContain('empty content'); }); + +test.only('should reset the second argument when the first argument is changed somehow', async () => { + const wrapper = mount(Picker, { + props: { + showToolbar: true, + columns: [ + { + text: 'test1', + value: '1', + children: [ + { + text: '-1', + value: '-1', + }, + { + text: '0', + value: '0', + }, + ], + }, + { + text: 'test2', + value: '2', + children: [ + { + text: '0', + value: '0', + }, + { + text: '1', + value: '2', + }, + ], + }, + ], + }, + }); + + await wrapper + .findAll('.van-picker-column')[0] + .findAll('.van-picker-column__item')[0] + .trigger('click'); + expect(wrapper.emitted<[PickerConfirmEventParams]>('change')).toBeFalsy(); + await wrapper + .findAll('.van-picker-column')[0] + .findAll('.van-picker-column__item')[1] + .trigger('click'); + await wrapper + .findAll('.van-picker-column')[0] + .findAll('.van-picker-column__item')[0] + .trigger('click'); + await wrapper.find('.van-picker__confirm').trigger('click'); + expect( + wrapper.emitted<[PickerConfirmEventParams]>('confirm')![0][0] + .selectedValues, + ).toEqual(['1', '-1']); +}); From 9af075d5e7355db10b669c7b649b502b37de6ba8 Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 26 Feb 2025 14:41:53 +0800 Subject: [PATCH 2/6] fix(Picker): should reset the second argument when the first argument is changed somehow --- packages/vant/src/picker/Picker.tsx | 13 ++----------- packages/vant/src/picker/test/index.spec.tsx | 2 +- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 7e044853f3b..72e51b34966 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -153,23 +153,14 @@ export default defineComponent({ }); const onChange = (value: Numeric, columnIndex: number) => { - if (columnsType.value === 'cascade') { - setValue( - columnIndex, - currentColumns.value[columnIndex].length - ? currentColumns.value[columnIndex][0][fields.value.value] - : undefined, - ); - } else { - setValue(columnIndex, value); - } + setValue(columnIndex, value); if (columnsType.value === 'cascade') { // reset values after cascading selectedValues.value.forEach((value, index) => { const options = currentColumns.value[index]; - if (!isOptionExist(options, value, fields.value)) { + if (!isOptionExist(options, value, fields.value) || index > 0) { setValue( index, options.length ? options[0][fields.value.value] : undefined, diff --git a/packages/vant/src/picker/test/index.spec.tsx b/packages/vant/src/picker/test/index.spec.tsx index 507e7866c53..0b6dd26a906 100644 --- a/packages/vant/src/picker/test/index.spec.tsx +++ b/packages/vant/src/picker/test/index.spec.tsx @@ -441,7 +441,7 @@ test('should render empty slot when options is empty', async () => { expect(wrapper.html()).not.toContain('empty content'); }); -test.only('should reset the second argument when the first argument is changed somehow', async () => { +test('should reset the second argument when the first argument is changed somehow', async () => { const wrapper = mount(Picker, { props: { showToolbar: true, From 13cc196a3418781c4646ab36efc6da09cd3fd5ab Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 26 Feb 2025 16:21:14 +0800 Subject: [PATCH 3/6] fix: a bug --- packages/vant/src/picker/Picker.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 72e51b34966..11f6055e47f 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -33,6 +33,8 @@ import { getFirstEnabledOption, } from './utils'; +import { AREA_EMPTY_CODE } from '../area/utils'; + // Composables import { useChildren, useEventListener, useParent } from '@vant/use'; import { useExpose } from '../composables/use-expose'; @@ -144,6 +146,7 @@ export default defineComponent({ newValues[index] = value; selectedValues.value = newValues; } + console.log(selectedValues.value, 'selectedValues'); }; const getEventParams = () => ({ @@ -159,12 +162,15 @@ export default defineComponent({ // reset values after cascading selectedValues.value.forEach((value, index) => { const options = currentColumns.value[index]; - + // reset when the first argument is changed if (!isOptionExist(options, value, fields.value) || index > 0) { - setValue( - index, - options.length ? options[0][fields.value.value] : undefined, - ); + const isEmptyOption = options.length + ? options[0][fields.value.value] + : undefined; + // there is special situation that when `columnsPlaceholder` property passes into Area component + if (isEmptyOption !== AREA_EMPTY_CODE) { + setValue(index, isEmptyOption); + } } }); } From 6c8e695afec471a6f066d40ad4736acde246f836 Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 26 Feb 2025 16:27:50 +0800 Subject: [PATCH 4/6] fix: delete console.log --- packages/vant/src/picker/Picker.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 11f6055e47f..b0245fae0ef 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -146,7 +146,6 @@ export default defineComponent({ newValues[index] = value; selectedValues.value = newValues; } - console.log(selectedValues.value, 'selectedValues'); }; const getEventParams = () => ({ From 970180a89394f9d33ad6f24aad2e495a848c6d02 Mon Sep 17 00:00:00 2001 From: JerryWu <409187100@qq.com> Date: Sat, 1 Mar 2025 21:08:11 +0800 Subject: [PATCH 5/6] fix: Enhance unit test cases. --- packages/vant/src/picker/Picker.tsx | 11 +++++------ packages/vant/src/picker/test/index.spec.tsx | 16 ++++++++++++++++ 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index b0245fae0ef..014a663c9f4 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -33,8 +33,6 @@ import { getFirstEnabledOption, } from './utils'; -import { AREA_EMPTY_CODE } from '../area/utils'; - // Composables import { useChildren, useEventListener, useParent } from '@vant/use'; import { useExpose } from '../composables/use-expose'; @@ -162,14 +160,15 @@ export default defineComponent({ selectedValues.value.forEach((value, index) => { const options = currentColumns.value[index]; // reset when the first argument is changed - if (!isOptionExist(options, value, fields.value) || index > 0) { + if ( + !isOptionExist(options, value, fields.value) || + (columnIndex === 0 && index > 0) + ) { const isEmptyOption = options.length ? options[0][fields.value.value] : undefined; // there is special situation that when `columnsPlaceholder` property passes into Area component - if (isEmptyOption !== AREA_EMPTY_CODE) { - setValue(index, isEmptyOption); - } + setValue(index, isEmptyOption); } }); } diff --git a/packages/vant/src/picker/test/index.spec.tsx b/packages/vant/src/picker/test/index.spec.tsx index 0b6dd26a906..dd98b065373 100644 --- a/packages/vant/src/picker/test/index.spec.tsx +++ b/packages/vant/src/picker/test/index.spec.tsx @@ -496,4 +496,20 @@ test('should reset the second argument when the first argument is changed someho wrapper.emitted<[PickerConfirmEventParams]>('confirm')![0][0] .selectedValues, ).toEqual(['1', '-1']); + console.log( + wrapper + .findAll('.van-picker-column')[1] + .findAll('.van-picker-column__item')[1] + .html(), + ); + await wrapper + .findAll('.van-picker-column')[1] + .findAll('.van-picker-column__item')[1] + .trigger('click'); + + await wrapper.find('.van-picker__confirm').trigger('click'); + expect( + wrapper.emitted<[PickerConfirmEventParams]>('confirm')![1][0] + .selectedValues, + ).toEqual(['1', '0']); }); From c72a4e4c961d547ee5a5997c2d4010ba264ad5bd Mon Sep 17 00:00:00 2001 From: JerryWu <409187100@qq.com> Date: Sun, 2 Mar 2025 15:49:11 +0800 Subject: [PATCH 6/6] fix: after comment --- packages/vant/src/picker/Picker.tsx | 10 +++----- packages/vant/src/picker/test/index.spec.tsx | 26 +++++--------------- 2 files changed, 10 insertions(+), 26 deletions(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 014a663c9f4..266d4ce9ccb 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -159,16 +159,14 @@ export default defineComponent({ // reset values after cascading selectedValues.value.forEach((value, index) => { const options = currentColumns.value[index]; - // reset when the first argument is changed if ( !isOptionExist(options, value, fields.value) || (columnIndex === 0 && index > 0) ) { - const isEmptyOption = options.length - ? options[0][fields.value.value] - : undefined; - // there is special situation that when `columnsPlaceholder` property passes into Area component - setValue(index, isEmptyOption); + setValue( + index, + options.length ? options[0][fields.value.value] : undefined, + ); } }); } diff --git a/packages/vant/src/picker/test/index.spec.tsx b/packages/vant/src/picker/test/index.spec.tsx index dd98b065373..bb95bd44e41 100644 --- a/packages/vant/src/picker/test/index.spec.tsx +++ b/packages/vant/src/picker/test/index.spec.tsx @@ -441,7 +441,7 @@ test('should render empty slot when options is empty', async () => { expect(wrapper.html()).not.toContain('empty content'); }); -test('should reset the second argument when the first argument is changed somehow', async () => { +test('should reset subsequent columns to their first item when a column changes', async () => { const wrapper = mount(Picker, { props: { showToolbar: true, @@ -477,31 +477,17 @@ test('should reset the second argument when the first argument is changed someho ], }, }); - - await wrapper - .findAll('.van-picker-column')[0] - .findAll('.van-picker-column__item')[0] - .trigger('click'); + const getPickerColumn = wrapper.findAll('.van-picker-column')[0]; + const getItem = getPickerColumn.findAll('.van-picker-column__item'); + await getItem[0].trigger('click'); expect(wrapper.emitted<[PickerConfirmEventParams]>('change')).toBeFalsy(); - await wrapper - .findAll('.van-picker-column')[0] - .findAll('.van-picker-column__item')[1] - .trigger('click'); - await wrapper - .findAll('.van-picker-column')[0] - .findAll('.van-picker-column__item')[0] - .trigger('click'); + await getItem[1].trigger('click'); + await getItem[0].trigger('click'); await wrapper.find('.van-picker__confirm').trigger('click'); expect( wrapper.emitted<[PickerConfirmEventParams]>('confirm')![0][0] .selectedValues, ).toEqual(['1', '-1']); - console.log( - wrapper - .findAll('.van-picker-column')[1] - .findAll('.van-picker-column__item')[1] - .html(), - ); await wrapper .findAll('.van-picker-column')[1] .findAll('.van-picker-column__item')[1]