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:
@@ -189,6 +189,7 @@ export default defineComponent({
|
|||||||
// wait nextTick to ensure the model value is update to date
|
// wait nextTick to ensure the model value is update to date
|
||||||
// when confirm event is emitted
|
// when confirm event is emitted
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
|
const params = getEventParams();
|
||||||
emit('confirm', params);
|
emit('confirm', params);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { later, mount, triggerDrag } from '../../../test';
|
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 = [
|
const simpleColumn = [
|
||||||
{ text: '1990', value: '1990' },
|
{ text: '1990', value: '1990' },
|
||||||
@@ -440,3 +441,51 @@ test('should render empty slot when options is empty', async () => {
|
|||||||
await wrapper.setProps({ columns: [{ values: ['foo'] }] });
|
await wrapper.setProps({ columns: [{ values: ['foo'] }] });
|
||||||
expect(wrapper.html()).not.toContain('empty content');
|
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],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user