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 };
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({
values: cursor.children,
@ -94,7 +102,7 @@ export default createComponent({
defaultIndex,
});
cursor = cursor.children[defaultIndex];
cursor = children[defaultIndex];
}
this.formattedColumns = formatted;

View File

@ -5,3 +5,34 @@ exports[`disabled in cascade 1`] = `
<div class="van-ellipsis">A2</div>
</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();
});
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();
});