[ComboBox] set tabIndex depending of number of options

UNRELEASED.md

@@ -12,6 +12,7 @@
 ### Bug fixes
 
 - Added an outline on `Banner` for Windows high contrast mode ([#2878](https://github.com/Shopify/polaris-react/pull/2878))
+- Fixed Autocomplete / ComboBox focus ([#1089](https://github.com/Shopify/polaris-react/issues/1089))
 
 ### Documentation
 

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -317,7 +317,7 @@ export function ComboBox({
         aria-haspopup
         onFocus={forcePopoverActiveTrue}
         onBlur={handleBlur}
-        tabIndex={0}
+        tabIndex={options.length === 0 ? -1 : 0}
       >
         <KeypressListener keyCode={Key.DownArrow} handler={selectNextOption} />
         <KeypressListener

src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx

@@ -48,6 +48,24 @@ describe('<ComboBox/>', () => {
       expect(optionListOptions[1].value).toBe('macaroni_pizza');
       expect(optionListOptions[1].label).toBe('Macaroni Pizza');
     });
+
+    it.each([
+      [options, 0],
+      [[], -1],
+    ])('sets tabIndex depending of number of options', (options, tabIndex) => {
+      const comboBox = mountWithApp(
+        <ComboBox
+          options={options}
+          selected={[]}
+          textField={renderTextField()}
+          onSelect={noop}
+        />,
+      );
+
+      expect(comboBox.find('div', {role: 'combobox'})).toHaveReactProps({
+        tabIndex,
+      });
+    });
   });
 
   describe('contentBefore and contentAfter', () => {