Skip to content

Commit

Permalink
Addressed comments
Browse files Browse the repository at this point in the history
  • Loading branch information
EmilyZhang777 committed Mar 15, 2024
1 parent 4c84457 commit 9e75311
Show file tree
Hide file tree
Showing 5 changed files with 9 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## FilterSearchProps.afterDropdownInputFocus property

A function which is called when the input gains focus. In addition to the default behavior.
A function which is called immediately after the input gains focus. It does not replace the default focus behavior.

**Signature:**

Expand Down
2 changes: 1 addition & 1 deletion docs/search-ui-react.filtersearchprops.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ 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. |
| [afterDropdownInputFocus?](./search-ui-react.filtersearchprops.afterdropdowninputfocus.md) | | (params: [AfterDropdownInputFocusProps](./search-ui-react.afterdropdowninputfocusprops.md)<!-- -->) =&gt; void | _(Optional)_ A function which is called immediately after the input gains focus. It does not replace the default focus 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. |
Expand Down
6 changes: 2 additions & 4 deletions src/components/FilterSearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ 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. In addition to the default behavior. */
/** A function which is called immediately after the input gains focus. It does not replace the default focus behavior. */
afterDropdownInputFocus?: (params: AfterDropdownInputFocusProps) => void,
/** Determines whether or not the results of the filter search are separated by field. Defaults to false. */
sectioned?: boolean,
Expand Down Expand Up @@ -307,9 +307,7 @@ export function FilterSearch({
executeFilterSearch(value);
}

if (afterDropdownInputFocus) {
afterDropdownInputFocus({value});
}
afterDropdownInputFocus?.({value});
}, [afterDropdownInputFocus, executeFilterSearch]);

return (
Expand Down
2 changes: 1 addition & 1 deletion tests/components/FilterSearch.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const meta: Meta<typeof FilterSearch> = {
args: {
label: 'Filter',
onDropdownInputChange: undefined,
onDropdownInputFocus: undefined,
afterDropdownInputFocus: undefined,
}
};
export default meta;
Expand Down
8 changes: 4 additions & 4 deletions tests/components/FilterSearch.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -663,13 +663,13 @@ describe('search without section labels', () => {

it('when an afterDropdownInputFocus prop is provided, invokes it in addition to the original ' +
'behavior when input gains focus', async () => {
const mockedaAfterDropdownInputFocus = jest.fn();
const mockedAfterDropdownInputFocus = jest.fn();
const executeFilterSearch = jest.spyOn(SearchHeadless.prototype, 'executeFilterSearch');
renderFilterSearch(
{searchFields: searchFieldsProp, afterDropdownInputFocus: mockedaAfterDropdownInputFocus});
await userEvent.type(screen.getByRole('textbox'), 'a');
{searchFields: searchFieldsProp, afterDropdownInputFocus: mockedAfterDropdownInputFocus});
await userEvent.click(screen.getByRole('textbox'));
expect(mockedaAfterDropdownInputFocus).toHaveBeenCalledTimes(1);
expect(mockedAfterDropdownInputFocus).toHaveBeenCalledTimes(1);
await userEvent.type(screen.getByRole('textbox'), 'a');
expect(executeFilterSearch).toHaveBeenCalledTimes(1);
});
});
Expand Down

0 comments on commit 9e75311

Please sign in to comment.