feat(query-builder): Return focus to input and call onSearch after clicking clear button (#72076)

Author: malwilley

static/app/components/searchQueryBuilder/index.spec.tsx

@@ -133,22 +133,27 @@ describe('SearchQueryBuilder', function () {
   describe('actions', function () {
     it('can clear the query', async function () {
       const mockOnChange = jest.fn();
+      const mockOnSearch = jest.fn();
       render(
         <SearchQueryBuilder
           {...defaultProps}
           initialQuery="browser.name:firefox"
           onChange={mockOnChange}
+          onSearch={mockOnSearch}
         />
       );
       userEvent.click(screen.getByRole('button', {name: 'Clear search query'}));
 
       await waitFor(() => {
         expect(mockOnChange).toHaveBeenCalledWith('');
+        expect(mockOnSearch).toHaveBeenCalledWith('');
       });
 
       expect(
         screen.queryByRole('row', {name: 'browser.name:firefox'})
       ).not.toBeInTheDocument();
+
+      expect(screen.getByRole('combobox')).toHaveFocus();
     });
   });
 

static/app/components/searchQueryBuilder/index.tsx

@@ -39,7 +39,7 @@ interface SearchQueryBuilderProps {
 }
 
 function ActionButtons() {
-  const {dispatch} = useSearchQueryBuilder();
+  const {dispatch, onSearch} = useSearchQueryBuilder();
 
   return (
     <ButtonsWrapper>
@@ -48,7 +48,10 @@ function ActionButtons() {
         size="zero"
         icon={<IconClose />}
         borderless
-        onClick={() => dispatch({type: 'CLEAR'})}
+        onClick={() => {
+          dispatch({type: 'CLEAR'});
+          onSearch?.('');
+        }}
       />
     </ButtonsWrapper>
   );

static/app/components/searchQueryBuilder/tokenizedQueryGrid.tsx

@@ -30,6 +30,7 @@ function useApplyFocusOverride(state: ListState<ParseResultToken>) {
 
   useLayoutEffect(() => {
     if (focusOverride && !focusOverride.part) {
+      state.selectionManager.setFocused(true);
       state.selectionManager.setFocusedKey(focusOverride.itemKey);
       dispatch({type: 'RESET_FOCUS_OVERRIDE'});
     }

static/app/components/searchQueryBuilder/useQueryBuilderState.tsx

@@ -199,6 +199,9 @@ export function useQueryBuilderState({initialQuery}: {initialQuery: string}) {
           return {
             ...state,
             query: '',
+            focusOverride: {
+              itemKey: `${Token.FREE_TEXT}:0`,
+            },
           };
         case 'UPDATE_QUERY':
           return {