fix(Picker): ensure that the confirm event params are up to date (#13381)

Co-authored-by: inottn <inottn@outlook.com>
This commit is contained in:
Jeff Wang
2025-03-23 10:18:52 +08:00
committed by GitHub
parent 794ef9f5d4
commit 3dc20ad39e
2 changed files with 51 additions and 1 deletions

View File

@@ -189,6 +189,7 @@ export default defineComponent({
// wait nextTick to ensure the model value is update to date
// when confirm event is emitted
nextTick(() => {
const params = getEventParams();
emit('confirm', params);
});

View File

@@ -1,5 +1,6 @@
import { later, mount, triggerDrag } from '../../../test';
import { Picker, type PickerConfirmEventParams } from '..';
import { Picker, type PickerOption, type PickerConfirmEventParams } from '..';
import { computed, ref } from 'vue';
const simpleColumn = [
{ text: '1990', value: '1990' },
@@ -440,3 +441,51 @@ test('should render empty slot when options is empty', async () => {
await wrapper.setProps({ columns: [{ values: ['foo'] }] });
expect(wrapper.html()).not.toContain('empty content');
});
test('should emit correct values when clicking confirm button during column scrolling', async () => {
const columnsOne: PickerOption[] = [
{ text: 'Beijing', value: 'Beijing' },
{ text: 'Shanghai', value: 'Shanghai' },
];
const columnsTwo: Record<string, PickerOption[]> = {
Beijing: [
{ text: 'Dongcheng', value: 'Dongcheng' },
{ text: 'Xicheng', value: 'Xicheng' },
{ text: 'Chaoyang', value: 'Chaoyang' },
{ text: 'Haidian', value: 'Haidian' },
],
Shanghai: [
{ text: 'Huangpu', value: 'Huangpu' },
{ text: 'Xuhui', value: 'Xuhui' },
{ text: 'Changning', value: 'Changning' },
{ text: 'Pudong', value: 'Pudong' },
],
};
const currentValues = ref(['Beijing', 'Dongcheng']);
const wrapper = mount({
setup() {
const columns = computed(() => [
columnsOne,
columnsTwo[currentValues.value[0]],
]);
return () => (
<Picker v-model={currentValues.value} columns={columns.value} />
);
},
});
const picker = wrapper.findComponent(Picker);
// Scroll to select "Shanghai"
triggerDrag(picker.findAll('.van-picker-column')[0], 0, -100);
// Trigger confirm immediately without waiting for scroll animation to complete
await picker.find('.van-picker__confirm').trigger('click');
expect(picker.emitted('confirm')![0]).toEqual([
{
selectedOptions: [
{ text: 'Shanghai', value: 'Shanghai' },
{ text: 'Huangpu', value: 'Huangpu' },
],
selectedValues: ['Shanghai', 'Huangpu'],
selectedIndexes: [1, 0],
},
]);
});