diff --git a/UNRELEASED.md b/UNRELEASED.md index 1f1dc720af4..afe6136381d 100644 --- a/UNRELEASED.md +++ b/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 diff --git a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx b/src/components/Autocomplete/components/ComboBox/ComboBox.tsx index f901efeda9a..f98ec2a0696 100644 --- a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx +++ b/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} > ', () => { 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( + , + ); + + expect(comboBox.find('div', {role: 'combobox'})).toHaveReactProps({ + tabIndex, + }); + }); }); describe('contentBefore and contentAfter', () => {