fix(Picker): move to next option when default option is disabled (#7499)

* fix(Picker): should move to next option when defaultOption is disabled

* test: update spec name
This commit is contained in:
neverland 2020-11-04 20:03:38 +08:00 committed by GitHub
parent ebd78a9d02
commit 287a4acea0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 2 deletions

View File

@ -86,7 +86,15 @@ export default createComponent({
let cursor = { children: this.columns }; let cursor = { children: this.columns };
while (cursor && cursor.children) { while (cursor && cursor.children) {
const defaultIndex = cursor.defaultIndex ?? +this.defaultIndex; const { children } = cursor;
let defaultIndex = cursor.defaultIndex ?? +this.defaultIndex;
while (
children[defaultIndex].disabled &&
defaultIndex < children.length - 1
) {
defaultIndex++;
}
formatted.push({ formatted.push({
values: cursor.children, values: cursor.children,
@ -94,7 +102,7 @@ export default createComponent({
defaultIndex, defaultIndex,
}); });
cursor = cursor.children[defaultIndex]; cursor = children[defaultIndex];
} }
this.formattedColumns = formatted; this.formattedColumns = formatted;

View File

@ -5,3 +5,34 @@ exports[`disabled in cascade 1`] = `
<div class="van-ellipsis">A2</div> <div class="van-ellipsis">A2</div>
</li> </li>
`; `;
exports[`should move to next option when default option is disabled 1`] = `
<div class="van-picker">
<!---->
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
<div class="van-ellipsis">A1</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">A2</div>
</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">B3</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">B4</div>
</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
`;

View File

@ -125,3 +125,23 @@ test('disabled in cascade', () => {
expect(wrapper.find('.van-picker-column__item--disabled')).toMatchSnapshot(); expect(wrapper.find('.van-picker-column__item--disabled')).toMatchSnapshot();
}); });
test('should move to next option when default option is disabled', () => {
const wrapper = mount(Picker, {
propsData: {
columns: [
{
text: 'A1',
disabled: true,
children: [{ text: 'B1' }, { text: 'B2' }],
},
{
text: 'A2',
children: [{ text: 'B3' }, { text: 'B4' }],
},
],
},
});
expect(wrapper).toMatchSnapshot();
});