Allow custom afterDropdownInputFocus on FilterSearch

docs/search-ui-react.filtersearch.md

@@ -9,14 +9,14 @@ A component which allows a user to search for filters associated with specific e
 **Signature:**
 
 ```typescript
-declare function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, sectioned, customCssClasses }: FilterSearchProps): JSX.Element;
+declare function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, onDropdownInputFocus, sectioned, customCssClasses }: FilterSearchProps): JSX.Element;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, sectioned, customCssClasses } | [FilterSearchProps](./search-ui-react.filtersearchprops.md) |  |
+|  { searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, onDropdownInputFocus, sectioned, customCssClasses } | [FilterSearchProps](./search-ui-react.filtersearchprops.md) |  |
 
 **Returns:**
 

docs/search-ui-react.filtersearchprops.md

@@ -19,6 +19,7 @@ interface FilterSearchProps
 |  [customCssClasses?](./search-ui-react.filtersearchprops.customcssclasses.md) |  | [FilterSearchCssClasses](./search-ui-react.filtersearchcssclasses.md) | _(Optional)_ CSS classes for customizing the component styling. |
 |  [label?](./search-ui-react.filtersearchprops.label.md) |  | string | _(Optional)_ The display label for the component. |
 |  [onDropdownInputChange?](./search-ui-react.filtersearchprops.ondropdowninputchange.md) |  | (params: [OnDropdownInputChangeProps](./search-ui-react.ondropdowninputchangeprops.md)<!-- -->) =&gt; void | _(Optional)_ A function which is called when the input element's value changes. Replaces the default behavior. |
+|  [onDropdownInputFocus?](./search-ui-react.filtersearchprops.ondropdowninputfocus.md) |  | (params: [OnDropdownInputFocusProps](./search-ui-react.ondropdowninputfocusprops.md)<!-- -->) =&gt; void | _(Optional)_ A function which is called when the input gains focus. Replaces the default behavior. |
 |  [onSelect?](./search-ui-react.filtersearchprops.onselect.md) |  | (params: [OnSelectParams](./search-ui-react.onselectparams.md)<!-- -->) =&gt; void | _(Optional)_ A function which is called when a filter is selected. |
 |  [placeholder?](./search-ui-react.filtersearchprops.placeholder.md) |  | string | _(Optional)_ The search input's placeholder text when no text has been entered by the user. Defaults to "Search here...". |
 |  [searchFields](./search-ui-react.filtersearchprops.searchfields.md) |  | Omit&lt;SearchParameterField, 'fetchEntities'&gt;\[\] | An array of fieldApiName and entityType which indicates what to perform the filter search against. |

docs/search-ui-react.filtersearchprops.ondropdowninputfocus.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FilterSearchProps](./search-ui-react.filtersearchprops.md) &gt; [onDropdownInputFocus](./search-ui-react.filtersearchprops.ondropdowninputfocus.md)
+
+## FilterSearchProps.onDropdownInputFocus property
+
+A function which is called when the input gains focus. Replaces the default behavior.
+
+**Signature:**
+
+```typescript
+onDropdownInputFocus?: (params: OnDropdownInputFocusProps) => void;
+```

docs/search-ui-react.md

@@ -18,7 +18,7 @@
 |  [executeSearch(searchActions)](./search-ui-react.executesearch.md) | Executes a universal/vertical search. |
 |  [Facets(props)](./search-ui-react.facets.md) | A component that displays all facets applicable to the current vertical search. |
 |  [FilterDivider({ className })](./search-ui-react.filterdivider.md) | A divider component used to separate NumericalFacets, HierarchicalFacets, StandardFacets, and StaticFilters. |
-|  [FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, sectioned, customCssClasses })](./search-ui-react.filtersearch.md) | A component which allows a user to search for filters associated with specific entities and fields. |
+|  [FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, onDropdownInputFocus, sectioned, customCssClasses })](./search-ui-react.filtersearch.md) | A component which allows a user to search for filters associated with specific entities and fields. |
 |  [Geolocation\_2({ geolocationOptions, radius, label, GeolocationIcon, handleClick, customCssClasses, })](./search-ui-react.geolocation_2.md) | A React Component which collects location information to create a location filter and perform a new search. |
 |  [getSearchIntents(searchActions)](./search-ui-react.getsearchintents.md) | Get search intents of the current query stored in headless using autocomplete request. |
 |  [getUserLocation(geolocationOptions)](./search-ui-react.getuserlocation.md) | Retrieves user's location using navigator.geolocation API. |
@@ -85,6 +85,7 @@
 |  [NumericalFacetsCssClasses](./search-ui-react.numericalfacetscssclasses.md) | The CSS class interface for [NumericalFacets()](./search-ui-react.numericalfacets.md)<!-- -->. |
 |  [NumericalFacetsProps](./search-ui-react.numericalfacetsprops.md) | Props for the [NumericalFacets()](./search-ui-react.numericalfacets.md) component. |
 |  [OnDropdownInputChangeProps](./search-ui-react.ondropdowninputchangeprops.md) | The parameters that are passed into [FilterSearchProps.onDropdownInputChange](./search-ui-react.filtersearchprops.ondropdowninputchange.md)<!-- -->. |
+|  [OnDropdownInputFocusProps](./search-ui-react.ondropdowninputfocusprops.md) | The parameters that are passed into [FilterSearchProps.onDropdownInputFocus](./search-ui-react.filtersearchprops.ondropdowninputfocus.md)<!-- -->. |
 |  [OnSelectParams](./search-ui-react.onselectparams.md) | The parameters that are passed into [FilterSearchProps.onSelect](./search-ui-react.filtersearchprops.onselect.md)<!-- -->. |
 |  [PaginationCssClasses](./search-ui-react.paginationcssclasses.md) | The CSS classes used for pagination. |
 |  [PaginationProps](./search-ui-react.paginationprops.md) | Props for [Pagination()](./search-ui-react.pagination.md) component |

docs/search-ui-react.ondropdowninputfocusprops.executefiltersearch.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [OnDropdownInputFocusProps](./search-ui-react.ondropdowninputfocusprops.md) &gt; [executeFilterSearch](./search-ui-react.ondropdowninputfocusprops.executefiltersearch.md)
+
+## OnDropdownInputFocusProps.executeFilterSearch property
+
+A function that executes a filter search and updates the input and dropdown options with the response.
+
+**Signature:**
+
+```typescript
+executeFilterSearch: (query?: string) => Promise<FilterSearchResponse | undefined>;
+```

docs/search-ui-react.ondropdowninputfocusprops.md

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [OnDropdownInputFocusProps](./search-ui-react.ondropdowninputfocusprops.md)
+
+## OnDropdownInputFocusProps interface
+
+The parameters that are passed into [FilterSearchProps.onDropdownInputFocus](./search-ui-react.filtersearchprops.ondropdowninputfocus.md)<!-- -->.
+
+**Signature:**
+
+```typescript
+interface OnDropdownInputFocusProps 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [executeFilterSearch](./search-ui-react.ondropdowninputfocusprops.executefiltersearch.md) |  | (query?: string) =&gt; Promise&lt;FilterSearchResponse \| undefined&gt; | A function that executes a filter search and updates the input and dropdown options with the response. |
+|  [value](./search-ui-react.ondropdowninputfocusprops.value.md) |  | string | The input element's value |
+

docs/search-ui-react.ondropdowninputfocusprops.value.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [OnDropdownInputFocusProps](./search-ui-react.ondropdowninputfocusprops.md) &gt; [value](./search-ui-react.ondropdowninputfocusprops.value.md)
+
+## OnDropdownInputFocusProps.value property
+
+The input element's value
+
+**Signature:**
+
+```typescript
+value: string;
+```

etc/search-ui-react.api.md

@@ -268,7 +268,7 @@ export interface FilterOptionConfig {
 }
 
 // @public
-export function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, sectioned, customCssClasses }: FilterSearchProps): JSX.Element;
+export function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, onDropdownInputFocus, sectioned, customCssClasses }: FilterSearchProps): JSX.Element;
 
 // @public
 export interface FilterSearchCssClasses extends AutocompleteResultCssClasses {
@@ -291,6 +291,7 @@ export interface FilterSearchProps {
     customCssClasses?: FilterSearchCssClasses;
     label?: string;
     onDropdownInputChange?: (params: OnDropdownInputChangeProps) => void;
+    onDropdownInputFocus?: (params: OnDropdownInputFocusProps) => void;
     onSelect?: (params: OnSelectParams) => void;
     placeholder?: string;
     searchFields: Omit<SearchParameterField, 'fetchEntities'>[];
@@ -471,6 +472,12 @@ export interface OnDropdownInputChangeProps {
     value: string;
 }
 
+// @public
+export interface OnDropdownInputFocusProps {
+    executeFilterSearch: (query?: string) => Promise<FilterSearchResponse | undefined>;
+    value: string;
+}
+
 // @public
 export type onSearchFunc = (searchEventData: {
     verticalKey?: string;

src/components/FilterSearch.tsx

@@ -70,6 +70,21 @@ export interface OnDropdownInputChangeProps {
   executeFilterSearch: (query?: string) => Promise<FilterSearchResponse | undefined>
 }
 
+/**
+ * The parameters that are passed into {@link FilterSearchProps.onDropdownInputFocus}.
+ *
+ * @public
+ */
+export interface OnDropdownInputFocusProps {
+  /** The input element's value */
+  value: string,
+  /**
+   * A function that executes a filter search and updates the input and dropdown options
+   * with the response.
+   */
+  executeFilterSearch: (query?: string) => Promise<FilterSearchResponse | undefined>
+}
+
 /**
  * The props for the {@link FilterSearch} component.
  *
@@ -95,6 +110,8 @@ export interface FilterSearchProps {
   onSelect?: (params: OnSelectParams) => void,
   /** A function which is called when the input element's value changes. Replaces the default behavior. */
   onDropdownInputChange?: (params: OnDropdownInputChangeProps) => void,
+  /** A function which is called when the input gains focus. Replaces the default behavior. */
+  onDropdownInputFocus?: (params: OnDropdownInputFocusProps) => void,
   /** Determines whether or not the results of the filter search are separated by field. Defaults to false. */
   sectioned?: boolean,
   /** CSS classes for customizing the component styling. */
@@ -116,6 +133,7 @@ export function FilterSearch({
   searchOnSelect,
   onSelect,
   onDropdownInputChange,
+  onDropdownInputFocus,
   sectioned = false,
   customCssClasses
 }: FilterSearchProps): JSX.Element {
@@ -290,10 +308,12 @@ export function FilterSearch({
   }
 
   const handleInputFocus = useCallback((value = '') => {
-    if (value) {
+    if (onDropdownInputFocus) {
+      onDropdownInputFocus({value, executeFilterSearch});
+    } else if (value) {
       executeFilterSearch(value);
     }
-  }, [executeFilterSearch]);
+  }, [onDropdownInputFocus, executeFilterSearch]);
 
   return (
     <div className={cssClasses.filterSearchContainer}>

src/components/index.ts

@@ -37,7 +37,8 @@ export {
   FilterSearchCssClasses,
   FilterSearchProps,
   OnSelectParams,
-  OnDropdownInputChangeProps
+  OnDropdownInputChangeProps,
+  OnDropdownInputFocusProps
 } from './FilterSearch';
 
 export {