diff --git a/docs/search-ui-react.afterdropdowninputfocusprops.md b/docs/search-ui-react.afterdropdowninputfocusprops.md new file mode 100644 index 00000000..a6b0258a --- /dev/null +++ b/docs/search-ui-react.afterdropdowninputfocusprops.md @@ -0,0 +1,20 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [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. | + diff --git a/docs/search-ui-react.ondropdowninputfocusprops.value.md b/docs/search-ui-react.afterdropdowninputfocusprops.value.md similarity index 50% rename from docs/search-ui-react.ondropdowninputfocusprops.value.md rename to docs/search-ui-react.afterdropdowninputfocusprops.value.md index 5f4be5e2..575738e4 100644 --- a/docs/search-ui-react.ondropdowninputfocusprops.value.md +++ b/docs/search-ui-react.afterdropdowninputfocusprops.value.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [OnDropdownInputFocusProps](./search-ui-react.ondropdowninputfocusprops.md) > [value](./search-ui-react.ondropdowninputfocusprops.value.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [AfterDropdownInputFocusProps](./search-ui-react.afterdropdowninputfocusprops.md) > [value](./search-ui-react.afterdropdowninputfocusprops.value.md) -## OnDropdownInputFocusProps.value property +## AfterDropdownInputFocusProps.value property The input element's value. diff --git a/docs/search-ui-react.filtersearch.md b/docs/search-ui-react.filtersearch.md index 799c15b6..9562fae3 100644 --- a/docs/search-ui-react.filtersearch.md +++ b/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:** diff --git a/docs/search-ui-react.filtersearchprops.afterdropdowninputfocus.md b/docs/search-ui-react.filtersearchprops.afterdropdowninputfocus.md new file mode 100644 index 00000000..47722686 --- /dev/null +++ b/docs/search-ui-react.filtersearchprops.afterdropdowninputfocus.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FilterSearchProps](./search-ui-react.filtersearchprops.md) > [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; +``` diff --git a/docs/search-ui-react.filtersearchprops.md b/docs/search-ui-react.filtersearchprops.md index d7ad5487..37c22d41 100644 --- a/docs/search-ui-react.filtersearchprops.md +++ b/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)) => 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)) => 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)) => 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)) => 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<SearchParameterField, 'fetchEntities'>\[\] | An array of fieldApiName and entityType which indicates what to perform the filter search against. | diff --git a/docs/search-ui-react.filtersearchprops.ondropdowninputfocus.md b/docs/search-ui-react.filtersearchprops.ondropdowninputfocus.md deleted file mode 100644 index 8062015e..00000000 --- a/docs/search-ui-react.filtersearchprops.ondropdowninputfocus.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FilterSearchProps](./search-ui-react.filtersearchprops.md) > [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; -``` diff --git a/docs/search-ui-react.md b/docs/search-ui-react.md index 33f20bcc..f8907d3f 100644 --- a/docs/search-ui-react.md +++ b/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 | diff --git a/docs/search-ui-react.ondropdowninputfocusprops.executefiltersearch.md b/docs/search-ui-react.ondropdowninputfocusprops.executefiltersearch.md deleted file mode 100644 index 54a4c7d3..00000000 --- a/docs/search-ui-react.ondropdowninputfocusprops.executefiltersearch.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [OnDropdownInputFocusProps](./search-ui-react.ondropdowninputfocusprops.md) > [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: () => Promise; -``` diff --git a/docs/search-ui-react.ondropdowninputfocusprops.md b/docs/search-ui-react.ondropdowninputfocusprops.md deleted file mode 100644 index 1962dede..00000000 --- a/docs/search-ui-react.ondropdowninputfocusprops.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [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) | | () => Promise<FilterSearchResponse \| undefined> | 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. | - diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md index b578c3c2..52d2507d 100644 --- a/etc/search-ui-react.api.md +++ b/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[]; @@ -472,12 +477,6 @@ export interface OnDropdownInputChangeProps { value: string; } -// @public -export interface OnDropdownInputFocusProps { - executeFilterSearch: () => Promise; - value: string; -} - // @public export type onSearchFunc = (searchEventData: { verticalKey?: string; diff --git a/src/components/FilterSearch.tsx b/src/components/FilterSearch.tsx index f488f81a..9a515292 100644 --- a/src/components/FilterSearch.tsx +++ b/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 } /** @@ -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 (
diff --git a/src/components/index.ts b/src/components/index.ts index 74e61718..eb766476 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -38,7 +38,7 @@ export { FilterSearchProps, OnSelectParams, OnDropdownInputChangeProps, - OnDropdownInputFocusProps + AfterDropdownInputFocusProps, } from './FilterSearch'; export { diff --git a/tests/components/FilterSearch.test.tsx b/tests/components/FilterSearch.test.tsx index 1a98dfdd..7e236636 100644 --- a/tests/components/FilterSearch.test.tsx +++ b/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); }); });