Rename prop

docs/search-ui-react.afterdropdowninputfocusprops.md

@@ -0,0 +1,20 @@
+<!-- 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; [AfterDropdownInputFocusProps](./search-ui-react.afterdropdowninputfocusprops.md)
+
+## AfterDropdownInputFocusProps interface
+
+The parameters that are passed into [FilterSearchProps.afterDropdownInputFocus](./search-ui-react.filtersearchprops.afterdropdowninputfocus.md)<!-- -->.
+
+**Signature:**
+
+```typescript
+interface AfterDropdownInputFocusProps 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [value](./search-ui-react.afterdropdowninputfocusprops.value.md) |  | string | The input element's value. |
+

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

@@ -1,8 +1,8 @@
 <!-- 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)
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [AfterDropdownInputFocusProps](./search-ui-react.afterdropdowninputfocusprops.md) &gt; [value](./search-ui-react.afterdropdowninputfocusprops.value.md)
 
-## OnDropdownInputFocusProps.value property
+## AfterDropdownInputFocusProps.value property
 
 The input element's value.
 

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, onDropdownInputFocus, sectioned, customCssClasses }: FilterSearchProps): JSX.Element;
+declare function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses }: FilterSearchProps): JSX.Element;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, onDropdownInputFocus, sectioned, customCssClasses } | [FilterSearchProps](./search-ui-react.filtersearchprops.md) |  |
+|  { searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses } | [FilterSearchProps](./search-ui-react.filtersearchprops.md) |  |
 
 **Returns:**
 

docs/search-ui-react.filtersearchprops.afterdropdowninputfocus.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; [afterDropdownInputFocus](./search-ui-react.filtersearchprops.afterdropdowninputfocus.md)
+
+## FilterSearchProps.afterDropdownInputFocus property
+
+A function which is called when the input gains focus. In addition to the default behavior.
+
+**Signature:**
+
+```typescript
+afterDropdownInputFocus?: (params: AfterDropdownInputFocusProps) => void;
+```

docs/search-ui-react.filtersearchprops.md

@@ -16,10 +16,10 @@ interface FilterSearchProps
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [afterDropdownInputFocus?](./search-ui-react.filtersearchprops.afterdropdowninputfocus.md) |  | (params: [AfterDropdownInputFocusProps](./search-ui-react.afterdropdowninputfocusprops.md)<!-- -->) =&gt; void | _(Optional)_ A function which is called when the input gains focus. In addition to the default behavior. |
 |  [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.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, onDropdownInputFocus, 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, afterDropdownInputFocus, 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. |
@@ -52,6 +52,7 @@
 
 |  Interface | Description |
 |  --- | --- |
+|  [AfterDropdownInputFocusProps](./search-ui-react.afterdropdowninputfocusprops.md) | The parameters that are passed into [FilterSearchProps.afterDropdownInputFocus](./search-ui-react.filtersearchprops.afterdropdowninputfocus.md)<!-- -->. |
 |  [AlternativeVerticalsCssClasses](./search-ui-react.alternativeverticalscssclasses.md) | The CSS class interface used for [AlternativeVerticals()](./search-ui-react.alternativeverticals.md)<!-- -->. |
 |  [AlternativeVerticalsProps](./search-ui-react.alternativeverticalsprops.md) | Props for [AlternativeVerticals()](./search-ui-react.alternativeverticals.md)<!-- -->. |
 |  [AppliedFiltersCssClasses](./search-ui-react.appliedfilterscssclasses.md) | The CSS class interface used for [AppliedFilters()](./search-ui-react.appliedfilters.md)<!-- -->. |
@@ -85,7 +86,6 @@
 |  [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 |

etc/search-ui-react.api.md

@@ -29,6 +29,11 @@ import { UniversalLimit } from '@yext/search-headless-react';
 import { UnknownFieldValueDirectAnswer } from '@yext/search-headless-react';
 import { VerticalResults as VerticalResults_2 } from '@yext/search-headless-react';
 
+// @public
+export interface AfterDropdownInputFocusProps {
+    value: string;
+}
+
 // @public
 export function AlternativeVerticals({ currentVerticalLabel, verticalConfigMap, displayAllOnNoResults, customCssClasses }: AlternativeVerticalsProps): JSX.Element | null;
 
@@ -268,7 +273,7 @@ export interface FilterOptionConfig {
 }
 
 // @public
-export function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, onDropdownInputFocus, sectioned, customCssClasses }: FilterSearchProps): JSX.Element;
+export function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses }: FilterSearchProps): JSX.Element;
 
 // @public
 export interface FilterSearchCssClasses extends AutocompleteResultCssClasses {
@@ -288,10 +293,10 @@ export interface FilterSearchCssClasses extends AutocompleteResultCssClasses {
 
 // @public
 export interface FilterSearchProps {
+    afterDropdownInputFocus?: (params: AfterDropdownInputFocusProps) => void;
     customCssClasses?: FilterSearchCssClasses;
     label?: string;
     onDropdownInputChange?: (params: OnDropdownInputChangeProps) => void;
-    onDropdownInputFocus?: (params: OnDropdownInputFocusProps) => void;
     onSelect?: (params: OnSelectParams) => void;
     placeholder?: string;
     searchFields: Omit<SearchParameterField, 'fetchEntities'>[];
@@ -472,12 +477,6 @@ export interface OnDropdownInputChangeProps {
     value: string;
 }
 
-// @public
-export interface OnDropdownInputFocusProps {
-    executeFilterSearch: () => Promise<FilterSearchResponse | undefined>;
-    value: string;
-}
-
 // @public
 export type onSearchFunc = (searchEventData: {
     verticalKey?: string;

src/components/FilterSearch.tsx

@@ -71,18 +71,13 @@ export interface OnDropdownInputChangeProps {
 }
 
 /**
- * The parameters that are passed into {@link FilterSearchProps.onDropdownInputFocus}.
+ * The parameters that are passed into {@link FilterSearchProps.afterDropdownInputFocus}.
  *
  * @public
  */
-export interface OnDropdownInputFocusProps {
+export interface AfterDropdownInputFocusProps {
   /** 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: () => Promise<FilterSearchResponse | undefined>
 }
 
 /**
@@ -110,8 +105,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,
+  /** A function which is called when the input gains focus. In addition to the default behavior. */
+  afterDropdownInputFocus?: (params: AfterDropdownInputFocusProps) => 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. */
@@ -133,7 +128,7 @@ export function FilterSearch({
   searchOnSelect,
   onSelect,
   onDropdownInputChange,
-  onDropdownInputFocus,
+  afterDropdownInputFocus,
   sectioned = false,
   customCssClasses
 }: FilterSearchProps): JSX.Element {
@@ -308,12 +303,14 @@ export function FilterSearch({
   }
 
   const handleInputFocus = useCallback((value = '') => {
-    if (onDropdownInputFocus) {
-      onDropdownInputFocus({value, executeFilterSearch: () => executeFilterSearch(value)});
-    } else if (value) {
+    if (value) {
       executeFilterSearch(value);
     }
-  }, [onDropdownInputFocus, executeFilterSearch]);
+
+    if (afterDropdownInputFocus) {
+      afterDropdownInputFocus({value});
+    }
+  }, [afterDropdownInputFocus, executeFilterSearch]);
 
   return (
     <div className={cssClasses.filterSearchContainer}>

src/components/index.ts

@@ -38,7 +38,7 @@ export {
   FilterSearchProps,
   OnSelectParams,
   OnDropdownInputChangeProps,
-  OnDropdownInputFocusProps
+  AfterDropdownInputFocusProps,
 } from './FilterSearch';
 
 export {

tests/components/FilterSearch.test.tsx

@@ -661,16 +661,16 @@ describe('search without section labels', () => {
     expect(executeFilterSearch).toHaveBeenCalledTimes(0);
   });
 
-  it('when an onDropdownInputFocus prop is provided, invokes it instead of the original ' +
+  it('when an afterDropdownInputFocus prop is provided, invokes it in addition to the original ' +
     'behavior when input gains focus', async () => {
-    const mockedOnDropdownInputFocus = jest.fn();
-    const executeFilterSearch = jest
-      .spyOn(SearchHeadless.prototype, 'executeFilterSearch');
+    const mockedaAfterDropdownInputFocus = jest.fn();
+    const executeFilterSearch = jest.spyOn(SearchHeadless.prototype, 'executeFilterSearch');
     renderFilterSearch(
-      {searchFields: searchFieldsProp, onDropdownInputFocus: mockedOnDropdownInputFocus});
+      {searchFields: searchFieldsProp, afterDropdownInputFocus: mockedaAfterDropdownInputFocus});
+    await userEvent.type(screen.getByRole('textbox'), 'a');
     await userEvent.click(screen.getByRole('textbox'));
-    expect(mockedOnDropdownInputFocus).toHaveBeenCalledTimes(1);
-    expect(executeFilterSearch).toHaveBeenCalledTimes(0);
+    expect(mockedaAfterDropdownInputFocus).toHaveBeenCalledTimes(1);
+    expect(executeFilterSearch).toHaveBeenCalledTimes(1);
   });
 });