feat(autoFocus): add support for autoFocus option

packages/autocomplete-core/autocompleteSetters.ts

@@ -1,11 +1,20 @@
 import { stateReducer } from './stateReducer';
 
-import { AutocompleteInstance, AutocompleteItem } from './types';
+import {
+  AutocompleteInstance,
+  AutocompleteStore,
+  RequiredAutocompleteOptions,
+} from './types';
 
-export function getAutocompleteSetters<TItem extends AutocompleteItem>({
+interface GetAutocompleteSettersOptions<TItem> {
+  store: AutocompleteStore<TItem>;
+  props: RequiredAutocompleteOptions<TItem>;
+}
+
+export function getAutocompleteSetters<TItem>({
   store,
   props,
-}) {
+}: GetAutocompleteSettersOptions<TItem>) {
   const setHighlightedIndex: AutocompleteInstance<
     TItem
   >['setHighlightedIndex'] = value => {

packages/autocomplete-core/defaultProps.ts

@@ -18,6 +18,7 @@ export function getDefaultProps<TItem>(
     id: generateAutocompleteId(),
     minLength: 1,
     placeholder: '',
+    autoFocus: false,
     defaultHighlightedIndex: 0,
     showCompletion: false,
     stallThreshold: 300,

packages/autocomplete-core/propGetters.ts

@@ -10,9 +10,17 @@ import {
   GetItemProps,
   GetLabelProps,
   GetMenuProps,
+  AutocompleteStore,
+  RequiredAutocompleteOptions,
+  AutocompleteSetters,
 } from './types';
 
-export function getPropGetters({
+interface GetPropGettersOptions<TItem> extends AutocompleteSetters<TItem> {
+  store: AutocompleteStore<TItem>;
+  props: RequiredAutocompleteOptions<TItem>;
+}
+
+export function getPropGetters<TItem>({
   store,
   props,
   setHighlightedIndex,
@@ -21,7 +29,7 @@ export function getPropGetters({
   setIsOpen,
   setStatus,
   setContext,
-}) {
+}: GetPropGettersOptions<TItem>) {
   const getRootProps: GetRootProps = rest => {
     return {
       role: 'combobox',
@@ -106,7 +114,7 @@ export function getPropGetters({
     return {
       'aria-autocomplete': 'list',
       'aria-activedescendant':
-        store.getState().isOpen && props.highlightedIndex >= 0
+        store.getState().isOpen && store.getState().highlightedIndex >= 0
           ? `${props.id}-item-${store.getState().highlightedIndex}`
           : null,
       'aria-controls': store.getState().isOpen ? `${props.id}-menu` : null,
@@ -118,7 +126,7 @@ export function getPropGetters({
       autoCapitalize: 'off',
       spellCheck: false,
       autofocus: props.autoFocus,
-      placeholder: props.showCompletion ? '' : props.placeholder,
+      placeholder: props.placeholder,
       // @TODO: see if this accessibility attribute is necessary
       // 'aria-expanded': store.getStore().isOpen,
       onInput: (event: InputEvent) => {

packages/autocomplete-core/types.ts

@@ -1,9 +1,5 @@
 export type StateUpdater<TState> = (value: TState) => void;
 
-export interface AutocompleteItem {
-  __autocomplete_id: number;
-}
-
 type SuggestionsOptions = any;
 
 export type AutocompleteSource = any;
@@ -228,6 +224,12 @@ export interface AutocompleteOptions<TItem> {
    * The text that appears in the search box input when there is no query.
    */
   placeholder?: string;
+  /**
+   * Whether to focus the search box when the page is loaded.
+   *
+   * @default false
+   */
+  autoFocus?: boolean;
   /**
    * The default item index to pre-select.
    *
@@ -298,6 +300,7 @@ export interface RequiredAutocompleteOptions<TItem> {
   id: string;
   onStateChange<TItem>(props: { state: AutocompleteState<TItem> }): void;
   placeholder: string;
+  autoFocus: boolean;
   defaultHighlightedIndex: number;
   showCompletion: boolean;
   minLength: number;

packages/autocomplete-react/SearchBox.tsx

@@ -81,7 +81,6 @@ export function SearchBox(props: SearchBoxProps) {
           {...props.getInputProps({
             ref: props.onInputRef,
             inputElement: (props.onInputRef as any).current,
-            placeholder: props.placeholder,
             type: 'search',
             maxLength: '512',
           })}