github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: auto-complete select tab focus logic #1438 #3015

pull/3052/head
tanjinzhou 2020-10-27 14:57:47 +08:00
parent f26c0218d5
commit 5597ec0a91
5 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./antdv-demo/docs/auto-complete/demo/basic.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>
@ -16,7 +16,7 @@ exports[`renders ./antdv-demo/docs/auto-complete/demo/basic.md correctly 1`] = `
exports[`renders ./antdv-demo/docs/auto-complete/demo/certain-category.md correctly 1`] = `
<div class="certain-category-search-wrapper" style="width: 250px;">
<div tabindex="0" class="certain-category-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
<div tabindex="-1" class="certain-category-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>
@ -31,7 +31,7 @@ exports[`renders ./antdv-demo/docs/auto-complete/demo/certain-category.md correc
`;
exports[`renders ./antdv-demo/docs/auto-complete/demo/custom.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>
@ -45,7 +45,7 @@ exports[`renders ./antdv-demo/docs/auto-complete/demo/custom.md correctly 1`] =
`;
exports[`renders ./antdv-demo/docs/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>
@ -59,7 +59,7 @@ exports[`renders ./antdv-demo/docs/auto-complete/demo/non-case-sensitive.md corr
`;
exports[`renders ./antdv-demo/docs/auto-complete/demo/options.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>
@ -74,7 +74,7 @@ exports[`renders ./antdv-demo/docs/auto-complete/demo/options.md correctly 1`] =
exports[`renders ./antdv-demo/docs/auto-complete/demo/uncertain-category.md correctly 1`] = `
<div class="global-search-wrapper" style="width: 300px;">
<div tabindex="0" class="global-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
<div tabindex="-1" class="global-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>

4
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -414,7 +414,7 @@ exports[`renders ./antdv-demo/docs/form/demo/register.vue correctly 1`] = `
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_website" title="Website" class="ant-form-item-required">Website</label></div>
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" data-__meta="[object Object]" data-__field="[object Object]" id="register_website"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input placeholder="website" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" data-__meta="[object Object]" data-__field="[object Object]" id="register_website"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input placeholder="website" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li>
</ul>
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
@ -539,7 +539,7 @@ exports[`renders ./antdv-demo/docs/form/demo/validate-other.vue correctly 1`] =
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_select-multiple" title="Select[multiple]" class="ant-form-item-required">Select[multiple]</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select-multiple"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select favourite colors</div><div><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="-1" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select-multiple"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select favourite colors</div><div><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li>
</div>
</div>

2
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -51,7 +51,7 @@ exports[`renders ./antdv-demo/docs/input/demo/group.md correctly 1`] = `
Sign Up
</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
</div>
<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<ul>

16
components/select/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./antdv-demo/docs/select/demo/automatic-tokenization.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-enabled" style="width: 100%;">
<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div>
@ -82,7 +82,7 @@ exports[`renders ./antdv-demo/docs/select/demo/custom-dropdown-menu.md correctly
`;
exports[`renders ./antdv-demo/docs/select/demo/hide-selected.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-enabled" style="width: 100%;">
<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Inserted are removed</div>
@ -109,7 +109,7 @@ exports[`renders ./antdv-demo/docs/select/demo/label-in-value.md correctly 1`] =
`;
exports[`renders ./antdv-demo/docs/select/demo/multiple.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-enabled" style="width: 100%;">
<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: none; user-select: none;">Please select</div>
@ -146,7 +146,7 @@ exports[`renders ./antdv-demo/docs/select/demo/optgroup.md correctly 1`] = `
`;
exports[`renders ./antdv-demo/docs/select/demo/option-label-prop.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-enabled" style="width: 100%;">
<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: none; user-select: none;">select one country</div>
@ -200,7 +200,7 @@ exports[`renders ./antdv-demo/docs/select/demo/search-box.md correctly 1`] = `
`;
exports[`renders ./antdv-demo/docs/select/demo/select-users.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-enabled" style="width: 100%;">
<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Select users</div>
@ -232,7 +232,7 @@ exports[`renders ./antdv-demo/docs/select/demo/size.md correctly 1`] = `
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div> <br>
<div tabindex="0" class="ant-select ant-select-enabled" style="width: 200px;">
<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: none; user-select: none;">Please select</div>
@ -254,7 +254,7 @@ exports[`renders ./antdv-demo/docs/select/demo/size.md correctly 1`] = `
</div>
</div>
</div> <br>
<div tabindex="0" class="ant-select ant-select-enabled" style="width: 200px;">
<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: none; user-select: none;">Please select</div>
@ -303,7 +303,7 @@ exports[`renders ./antdv-demo/docs/select/demo/suffix.md correctly 1`] = `
`;
exports[`renders ./antdv-demo/docs/select/demo/tags.md correctly 1`] = `
<div tabindex="0" class="ant-select ant-select-enabled" style="width: 100%;">
<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Tags Mode</div>

6
components/vc-select/Select.jsx
View File

@ -1624,6 +1624,10 @@ const Select = {
// selectionProps.on.blur = this.selectionRefBlur;
// selectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
//}
let extraSelectionProps = { attrs: { tabIndex: -1 } };
if (!isMultipleOrTagsOrCombobox(props)) {
extraSelectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
}
const rootCls = {
[prefixCls]: true,
[`${prefixCls}-open`]: open,
@ -1692,7 +1696,7 @@ const Select = {
onMousedown={this.markMouseDown}
onMouseup={this.markMouseLeave}
onMouseout={this.markMouseLeave}
tabIndex={props.disabled ? -1 : props.tabIndex}
{...extraSelectionProps}
onBlur={this.selectionRefBlur}
onFocus={this.selectionRefFocus}
onClick={this.selectionRefClick}