fix(autocomplete): add placeholder input prop (#6817)

* fix(autocomplete): add `placeholder` input prop

* test: fix snapshot

Author: FabienMotte

examples/react/query-suggestions/src/App.tsx

@@ -54,6 +54,7 @@ export function App() {
 
             <div className="search-panel__results">
               <EXPERIMENTAL_Autocomplete
+                placeholder="Search for products"
                 indices={[
                   {
                     indexName: 'instant_search',

packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteSearch.tsx

@@ -63,7 +63,6 @@ export function createAutocompleteSearchComponent({ createElement }: Renderer) {
             autoCapitalize="off"
             enterKeyHint="search"
             spellCheck="false"
-            placeholder=""
             maxLength={512}
             type="search"
             value={query}

packages/instantsearch-ui-components/src/components/autocomplete/createAutocompletePropGetters.ts

@@ -49,6 +49,7 @@ export type UsePropGetters<TItem extends BaseHit> = (params: {
   indicesConfig: Array<AutocompleteIndexConfig<TItem>>;
   onRefine: (query: string) => void;
   onSelect: NonNullable<AutocompleteIndexConfig<TItem>['onSelect']>;
+  placeholder?: string;
 }) => {
   getInputProps: GetInputProps;
   getItemProps: GetItemProps;
@@ -68,6 +69,7 @@ export function createAutocompletePropGetters({
     indicesConfig,
     onRefine,
     onSelect: globalOnSelect,
+    placeholder,
   }: Parameters<UsePropGetters<TItem>>[0]): ReturnType<UsePropGetters<TItem>> {
     const getElementId = createGetElementId(useId());
     const inputRef = useRef<HTMLInputElement>(null);
@@ -159,6 +161,7 @@ export function createAutocompletePropGetters({
         'aria-haspopup': 'grid',
         'aria-controls': getElementId('panel'),
         'aria-activedescendant': activeDescendant,
+        placeholder,
         onFocus: () => setIsOpen(true),
         onKeyDown: (event) => {
           switch (event.key) {

packages/instantsearch.js/src/widgets/autocomplete/autocomplete.tsx

@@ -119,7 +119,11 @@ type RendererParams<TItem extends BaseHit> = {
   };
 } & Pick<
   AutocompleteWidgetParams<TItem>,
-  'getSearchPageURL' | 'onSelect' | 'showRecent' | 'showSuggestions'
+  | 'getSearchPageURL'
+  | 'onSelect'
+  | 'showRecent'
+  | 'showSuggestions'
+  | 'placeholder'
 > &
   Required<Pick<AutocompleteWidgetParams<TItem>, 'cssClasses' | 'templates'>>;
 
@@ -176,6 +180,7 @@ type AutocompleteWrapperProps<TItem extends BaseHit> = Pick<
   | 'renderState'
   | 'showRecent'
   | 'showSuggestions'
+  | 'placeholder'
 > &
   Pick<AutocompleteRenderState, 'indices' | 'refine'> &
   RendererOptions<Partial<AutocompleteWidgetParams<TItem>>>;
@@ -192,6 +197,7 @@ function AutocompleteWrapper<TItem extends BaseHit>({
   showRecent,
   showSuggestions,
   templates,
+  placeholder,
 }: AutocompleteWrapperProps<TItem>) {
   const { isolatedIndex, targetIndex } = renderState;
 
@@ -250,6 +256,7 @@ function AutocompleteWrapper<TItem extends BaseHit>({
 
           setQuery(query);
         }),
+      placeholder,
     });
 
   let AutocompleteRecentSearchComponent = ({
@@ -499,6 +506,11 @@ type AutocompleteWidgetParams<TItem extends BaseHit> = {
    * CSS classes to add.
    */
   cssClasses?: AutocompleteCSSClasses;
+
+  /**
+   * Placeholder text for the search input.
+   */
+  placeholder?: string;
 };
 
 export type AutocompleteWidget<TItem extends BaseHit = BaseHit> = WidgetFactory<
@@ -521,6 +533,7 @@ export function EXPERIMENTAL_autocomplete<TItem extends BaseHit = BaseHit>(
     onSelect,
     templates = {},
     cssClasses: userCssClasses = {},
+    placeholder,
   } = widgetParams || {};
 
   if (!container) {
@@ -593,6 +606,7 @@ export function EXPERIMENTAL_autocomplete<TItem extends BaseHit = BaseHit>(
     cssClasses,
     showRecent,
     showSuggestions,
+    placeholder,
     renderState: {
       indexTemplateProps: [],
       isolatedIndex: undefined,

packages/react-instantsearch/src/widgets/Autocomplete.tsx

@@ -130,6 +130,7 @@ export type AutocompleteProps<TItem extends BaseHit> = ComponentProps<'div'> & {
   }) => React.JSX.Element;
   searchParameters?: AutocompleteSearchParameters;
   classNames?: Partial<AutocompleteClassNames>;
+  placeholder?: string;
 };
 
 type InnerAutocompleteProps<TItem extends BaseHit> = Omit<
@@ -235,6 +236,7 @@ function InnerAutocomplete<TItem extends BaseHit = BaseHit>({
   panelComponent: PanelComponent,
   showRecent,
   showSuggestions,
+  placeholder,
   ...props
 }: InnerAutocompleteProps<TItem>) {
   const {
@@ -279,6 +281,7 @@ function InnerAutocomplete<TItem extends BaseHit = BaseHit>({
 
           setQuery(query);
         }),
+      placeholder,
     });
 
   const AutocompleteRecentSearchComponent =

packages/react-instantsearch/src/widgets/__tests__/Autocomplete.test.tsx

@@ -138,7 +138,6 @@ describe('Autocomplete', () => {
             enterkeyhint="search"
             id="autocomplete:r0:input"
             maxlength="512"
-            placeholder=""
             role="combobox"
             spellcheck="false"
             type="search"