[AlphaPicker] Remove autocomplete from SearchField props (#11836)

### WHY are these changes introduced?

Quick api cleanup

### WHAT is this pull request doing?

SearchField doesn't need the autocomplete prop

Author: kyledurand

polaris-react/playground/DetailsPage.tsx

@@ -648,7 +648,6 @@ export function DetailsPage() {
                   searchField={{
                     label: 'Search tags',
                     placeholder: 'Search or add new tags',
-                    autoComplete: 'off',
                     value: query,
                     onChange: (value) => setQuery(value),
                   }}
@@ -676,7 +675,6 @@ export function DetailsPage() {
                   searchField={{
                     label: 'Search vendors',
                     placeholder: 'Search or add new vendor',
-                    autoComplete: 'off',
                     value: query,
                     onChange: (value) => setQuery(value),
                   }}

polaris-react/src/components/Picker/Picker.tsx

@@ -13,15 +13,14 @@ import type {
   ComboboxListboxOptionType,
 } from '../../utilities/combobox';
 import {Box} from '../Box';
-import type {TextFieldProps} from '../TextField';
 import type {ListboxProps, OptionProps} from '../Listbox';
 import {Listbox} from '../Listbox';
 import type {IconProps} from '../Icon';
 import {Icon} from '../Icon';
 import {escapeRegex} from '../../utilities/string';
 
 import {Activator, SearchField} from './components';
-import type {ActivatorProps} from './components';
+import type {SearchFieldProps, ActivatorProps} from './components';
 
 export interface PickerProps extends Omit<ListboxProps, 'children'> {
   /** Configure the button that activates the Picker */
@@ -33,7 +32,7 @@ export interface PickerProps extends Omit<ListboxProps, 'children'> {
   /** Used to add a new picker option that isn't listed */
   addAction?: OptionProps & {icon?: IconProps['source']};
   /** TextField that allows filtering of options */
-  searchField?: TextFieldProps;
+  searchField?: SearchFieldProps;
   /** Whether or not more options are available to lazy load when the bottom of the listbox reached. Use the hasMoreResults boolean provided by the GraphQL API of the paginated data. */
   willLoadMoreOptions?: boolean;
   /** Height to set on the Popover Pane. */

polaris-react/src/components/Picker/components/SearchField/SearchField.tsx

@@ -8,6 +8,8 @@ import {Text} from '../../../Text';
 
 import styles from './SearchField.module.css';
 
+export type SearchFieldProps = Omit<TextFieldProps, 'autoComplete'>;
+
 export function SearchField({
   value,
   id: idProp,
@@ -19,7 +21,7 @@ export function SearchField({
   prefix,
   placeholder,
   focused,
-}: TextFieldProps) {
+}: SearchFieldProps) {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const comboboxTextFieldContext = useComboboxTextField();
 
@@ -89,12 +91,13 @@ export function SearchField({
         className={styles.SearchField}
         value={value}
         type={type}
-        aria-activedescendant={activeOptionId}
         role="combobox"
+        placeholder={placeholder}
+        autoComplete="off"
+        aria-activedescendant={activeOptionId}
         aria-haspopup="listbox"
         aria-autocomplete="list"
         aria-expanded="true"
-        placeholder={placeholder}
         aria-controls={listboxId}
         onFocus={handleFocus}
         onBlur={handleBlur}

polaris-react/src/components/Picker/components/SearchField/index.ts

@@ -1 +1,2 @@
 export {SearchField} from './SearchField';
+export type {SearchFieldProps} from './SearchField';

polaris-react/src/components/Picker/components/SearchField/tests/SearchField.test.tsx

@@ -17,12 +17,7 @@ function mountWithProvider(
     <ComboboxTextFieldContext.Provider
       value={{...props.textFieldProviderValue}}
     >
-      <SearchField
-        label="label"
-        onChange={noop}
-        autoComplete="off"
-        {...props.textFieldProps}
-      />
+      <SearchField label="label" onChange={noop} {...props.textFieldProps} />
     </ComboboxTextFieldContext.Provider>,
   );
 

polaris-react/src/components/Picker/components/index.ts

@@ -1,2 +1,2 @@
-export {SearchField} from './SearchField';
+export * from './SearchField';
 export * from './Activator';

polaris-react/src/components/Picker/tests/Picker.test.tsx

@@ -20,7 +20,7 @@ describe('<Picker />', () => {
   it('renders a SearchField', () => {
     const picker = mountWithApp(
       <Picker
-        searchField={{label: 'Input', autoComplete: 'off'}}
+        searchField={{label: 'Input'}}
         activator={{label: 'Choose something'}}
       />,
     );
@@ -51,7 +51,7 @@ describe('<Picker />', () => {
         activator={{}}
         addAction={addAction}
         options={[{value: 'one', children: 'One'}]}
-        searchField={{label: '', autoComplete: 'off'}}
+        searchField={{label: ''}}
       />,
     );
 
@@ -68,11 +68,7 @@ describe('<Picker />', () => {
     ];
 
     const picker = mountWithApp(
-      <Picker
-        activator={{}}
-        options={options}
-        searchField={{label: '', autoComplete: 'off'}}
-      />,
+      <Picker activator={{}} options={options} searchField={{label: ''}} />,
     );
 
     picker.find('button')!.trigger('onClick');