[Filters] Add onQueryFocused callback

UNRELEASED.md

@@ -36,6 +36,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Exported `AppliedFilterInterface` and `FilterInterface` from `Filters` ([#1924](https://github.com/Shopify/polaris-react/pull/1924))
 - Improved color contrast of links inside `Banner` ([#1651](https://github.com/Shopify/polaris-react/pull/1651))
 - Add underline to Links and Plain button on hover, so it doesn't rely on color alone for accessibility ([#1885](https://github.com/Shopify/polaris-react/pull/1885))
+- Add `onQueryFocus` callback prop to the `Filters` component ([#1948](https://github.com/Shopify/polaris-react/pull/1948))
 
 ### Bug fixes
 

src/components/Filters/Filters.tsx

@@ -74,6 +74,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;
 }
@@ -133,6 +135,7 @@ class Filters extends React.Component<ComposedProps, State> {
       queryValue,
       onQueryBlur,
       onQueryChange,
+      onQueryFocus,
       focused,
       onClearAll,
       appliedFilters,
@@ -236,6 +239,7 @@ class Filters extends React.Component<ComposedProps, State> {
           }
           onChange={onQueryChange}
           onBlur={onQueryBlur}
+          onFocus={onQueryFocus}
           value={queryValue}
           focused={focused}
           label={

src/components/Filters/tests/Filters.test.tsx

@@ -1,7 +1,7 @@
 import 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,
@@ -50,6 +50,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} />);