Skip to content

Commit

Permalink
[Filters] Add onQueryFocused callback (#1948)
Browse files Browse the repository at this point in the history
  • Loading branch information
joshuajay authored and Tim Layton committed Aug 12, 2019
1 parent 72f0041 commit e129428
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 1 deletion.
2 changes: 2 additions & 0 deletions UNRELEASED.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f

### Enhancements

- Added `onQueryFocus` callback prop to the `Filters` component ([#1948](https://github.com/Shopify/polaris-react/pull/1948))

### Bug fixes

### Documentation
Expand Down
4 changes: 4 additions & 0 deletions src/components/Filters/Filters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ export interface Props {
onClearAll(): void;
/** Callback when the query field is blurred */
onQueryBlur?(): void;
/** Callback when the query field is focused */
onQueryFocus?(): void;
/** The content to display inline with the controls */
children?: React.ReactNode;
}
Expand Down Expand Up @@ -131,6 +133,7 @@ class Filters extends React.Component<ComposedProps, State> {
queryValue,
onQueryBlur,
onQueryChange,
onQueryFocus,
focused,
onClearAll,
appliedFilters,
Expand Down Expand Up @@ -226,6 +229,7 @@ class Filters extends React.Component<ComposedProps, State> {
}
onChange={onQueryChange}
onBlur={onQueryBlur}
onFocus={onQueryFocus}
value={queryValue}
focused={focused}
label={
Expand Down
13 changes: 12 additions & 1 deletion src/components/Filters/tests/Filters.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import {ReactWrapper} from 'enzyme';
import {matchMedia} from '@shopify/jest-dom-mocks';
import {Button, Popover, Sheet, Tag} from 'components';
import {Button, Popover, Sheet, Tag, TextField} from 'components';

import {mountWithAppProvider, trigger, findByTestID} from 'test-utilities';

Expand Down Expand Up @@ -47,6 +47,17 @@ describe('<Filters />', () => {
matchMedia.restore();
});

it('calls the onQueryFocus callback when the query field is focused', () => {
const onQueryFocus = jest.fn();
const filters = mountWithAppProvider(
<Filters {...mockProps} onQueryFocus={onQueryFocus} />,
);

trigger(filters.find(TextField), 'onFocus');

expect(onQueryFocus).toHaveBeenCalledTimes(1);
});

describe('toggleFilters()', () => {
it('opens the sheet on toggle button click', () => {
const resourceFilters = mountWithAppProvider(<Filters {...mockProps} />);
Expand Down

0 comments on commit e129428

Please sign in to comment.