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

Author: tangjinzhou

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

@@ -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>

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -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>

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -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>

components/select/__tests__/__snapshots__/demo.test.js.snap

@@ -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>

components/vc-select/Select.jsx

@@ -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}