From 1abc27b27fbe86d838dd83ec0a216557eca9d66d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Tue, 25 Apr 2023 12:58:02 +0200
Subject: [PATCH 1/8] Remove closeAndResetInput

---
 .../teleterm/src/ui/Search/SearchBar.test.tsx        |  1 -
 .../teleterm/src/ui/Search/SearchContext.tsx         |  7 -------
 .../teleterm/src/ui/Search/pickers/ActionPicker.tsx  | 10 ++++------
 .../src/ui/Search/pickers/ParameterPicker.tsx        | 12 ++++++------
 4 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx b/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx
index 02c7a8f5e69bd..1d48c7928ac04 100644
--- a/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx
@@ -323,7 +323,6 @@ const getMockedSearchContext = (): SearchContext.SearchContext => ({
   isOpen: true,
   open: () => {},
   close: () => {},
-  closeAndResetInput: () => {},
   resetInput: () => {},
   changeActivePicker: () => {},
   onInputValueChange: () => {},
diff --git a/web/packages/teleterm/src/ui/Search/SearchContext.tsx b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
index ad65425ddf31a..b9b2fb9747292 100644
--- a/web/packages/teleterm/src/ui/Search/SearchContext.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
@@ -38,7 +38,6 @@ export interface SearchContext {
   isOpen: boolean;
   open(fromElement?: Element): void;
   close(): void;
-  closeAndResetInput(): void;
   resetInput(): void;
   setFilter(filter: SearchFilter): void;
   removeFilter(filter: SearchFilter): void;
@@ -82,11 +81,6 @@ export const SearchContextProvider: FC = props => {
     }
   }, []);
 
-  const closeAndResetInput = useCallback(() => {
-    close();
-    setInputValue('');
-  }, [close]);
-
   const resetInput = useCallback(() => {
     setInputValue('');
   }, []);
@@ -197,7 +191,6 @@ export const SearchContextProvider: FC = props => {
         isOpen,
         open,
         close,
-        closeAndResetInput,
         pauseUserInteraction,
         addWindowEventListener,
       }}
diff --git a/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx b/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
index b399bff3d2088..4f1849edcfe4f 100644
--- a/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
+++ b/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
@@ -69,7 +69,6 @@ export function ActionPicker(props: { input: ReactElement }) {
     close,
     inputValue,
     resetInput,
-    closeAndResetInput,
     filters,
     removeFilter,
     addWindowEventListener,
@@ -112,17 +111,16 @@ export function ActionPicker(props: { input: ReactElement }) {
         // Overall, the context should probably encapsulate more logic so that the components don't
         // have to worry about low-level stuff such as input state. Input state already lives in the
         // search context so it should be managed from there, if possible.
-        if (action.preventAutoClose === true) {
-          resetInput();
-        } else {
-          closeAndResetInput();
+        resetInput();
+        if (!action.preventAutoClose) {
+          close();
         }
       }
       if (action.type === 'parametrized-action') {
         changeActivePicker(getParameterPicker(action));
       }
     },
-    [changeActivePicker, closeAndResetInput, resetInput]
+    [changeActivePicker, close, resetInput]
   );
 
   const filterButtons = filters.map(s => {
diff --git a/web/packages/teleterm/src/ui/Search/pickers/ParameterPicker.tsx b/web/packages/teleterm/src/ui/Search/pickers/ParameterPicker.tsx
index a33c437b3f009..b37154e1916fe 100644
--- a/web/packages/teleterm/src/ui/Search/pickers/ParameterPicker.tsx
+++ b/web/packages/teleterm/src/ui/Search/pickers/ParameterPicker.tsx
@@ -37,7 +37,7 @@ interface ParameterPickerProps {
 export function ParameterPicker(props: ParameterPickerProps) {
   const {
     inputValue,
-    closeAndResetInput,
+    close,
     changeActivePicker,
     resetInput,
     addWindowEventListener,
@@ -62,13 +62,13 @@ export function ParameterPicker(props: ParameterPickerProps) {
   const onPick = useCallback(
     (item: string) => {
       props.action.perform(item);
-      if (props.action.preventAutoClose === true) {
-        resetInput();
-      } else {
-        closeAndResetInput();
+
+      resetInput();
+      if (!props.action.preventAutoClose) {
+        close();
       }
     },
-    [closeAndResetInput, resetInput, props.action]
+    [close, resetInput, props.action]
   );
 
   const onBack = useCallback(() => {

From bf97cdd1561e0a4c91b2ef6f4d2a2701c04627c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Tue, 25 Apr 2023 12:58:02 +0200
Subject: [PATCH 2/8] Remove unnecessary input focus from `open`

As the comment in SearchBar explains, the focus wasn't actually achieving
anything. I added it only because I was testing SearchContext in separation
and depended on the input getting focused in the test.

This doesn't reflect how the input is actually used so I adjusted the test.
---
 web/packages/teleterm/src/ui/Search/SearchBar.tsx          | 6 +++++-
 web/packages/teleterm/src/ui/Search/SearchContext.test.tsx | 7 ++++---
 web/packages/teleterm/src/ui/Search/SearchContext.tsx      | 7 ++++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/web/packages/teleterm/src/ui/Search/SearchBar.tsx b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
index dcd0c37c58be5..fe72479eea36d 100644
--- a/web/packages/teleterm/src/ui/Search/SearchBar.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
@@ -128,7 +128,11 @@ function SearchBar() {
       )}
       {isOpen && (
         <activePicker.picker
-          // autofocusing cannot be done in `open` function as it would focus the input from closed state
+          // When the search bar transitions from closed to open state, `inputRef.current` within
+          // the `open` function refers to the input element from when the search bar was closed.
+          //
+          // Thus, calling `focus()` on it would have no effect. Instead, we add `autoFocus` on the
+          // input when the search bar is open.
           input={<Input {...defaultInputProps} autoFocus={true} />}
         />
       )}
diff --git a/web/packages/teleterm/src/ui/Search/SearchContext.test.tsx b/web/packages/teleterm/src/ui/Search/SearchContext.test.tsx
index 31cce8c34b2f5..6ebb95ac39316 100644
--- a/web/packages/teleterm/src/ui/Search/SearchContext.test.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchContext.test.tsx
@@ -146,11 +146,12 @@ describe('addWindowEventListener', () => {
 describe('open', () => {
   it('manages the focus properly when called with no arguments', () => {
     const SearchInput = () => {
-      const { inputRef, open, close } = useSearchContext();
+      const { inputRef, isOpen, open, close } = useSearchContext();
 
       return (
         <>
           <input data-testid="search-input" ref={inputRef} />
+          <div data-testid="is-open">{String(isOpen)}</div>
           <button data-testid="open" onClick={() => open()} />
           <button data-testid="close" onClick={() => close()} />
         </>
@@ -168,11 +169,11 @@ describe('open', () => {
     );
 
     const otherInput = screen.getByTestId('other-input');
-    const searchInput = screen.getByTestId('search-input');
     otherInput.focus();
 
+    expect(screen.getByTestId('is-open')).toHaveTextContent('false');
     screen.getByTestId('open').click();
-    expect(searchInput).toHaveFocus();
+    expect(screen.getByTestId('is-open')).toHaveTextContent('true');
 
     screen.getByTestId('close').click();
     expect(otherInput).toHaveFocus();
diff --git a/web/packages/teleterm/src/ui/Search/SearchContext.tsx b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
index b9b2fb9747292..7f17ee454353e 100644
--- a/web/packages/teleterm/src/ui/Search/SearchContext.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
@@ -90,14 +90,15 @@ export const SearchContextProvider: FC = props => {
       // Even if the search bar is already open, we want to focus on the input anyway. The search
       // input might lose focus due to user interaction while the search bar stays open. Focusing
       // here again makes it possible to use the shortcut to grant the focus to the input again.
+      //
+      // Also note that SearchBar renders two distinct input elements, one when the search bar is
+      // closed and another when its open. During the initial call to this function,
+      // inputRef.current is equal to the element from when the search bar was closed.
       inputRef.current?.focus();
       return;
     }
 
-    // In case `open` was called without `fromElement` (e.g. when using the keyboard shortcut), we
-    // must read `document.activeElement` before we focus the input.
     previouslyActive.current = fromElement || document.activeElement;
-    inputRef.current?.focus();
     setIsOpen(true);
   }
 

From 058cb0a079b9322c845b7970566c8af8de527bf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Wed, 26 Apr 2023 13:12:23 +0200
Subject: [PATCH 3/8] Move onFocus on input, add onBlur to input

---
 .../teleterm/src/ui/Search/SearchBar.test.tsx | 41 ++++++++++++++++-
 .../teleterm/src/ui/Search/SearchBar.tsx      | 40 ++++++++++++++--
 .../src/ui/Search/SearchContext.test.tsx      | 46 +++++++++++++++++++
 .../teleterm/src/ui/Search/SearchContext.tsx  | 36 +++++++++++++--
 4 files changed, 154 insertions(+), 9 deletions(-)

diff --git a/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx b/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx
index 1d48c7928ac04..822163c7091f9 100644
--- a/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx
@@ -16,7 +16,7 @@
 
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { render, screen, waitFor } from 'design/utils/testing';
+import { render, screen, waitFor, act } from 'design/utils/testing';
 import { makeSuccessAttempt } from 'shared/hooks/useAsync';
 
 import Logger, { NullService } from 'teleterm/logger';
@@ -315,6 +315,43 @@ it('shows a login modal when a request to a cluster from the current workspace f
   expect(screen.getByRole('menu')).toBeInTheDocument();
 });
 
+it('closes on a click on an unfocusable element outside of the search bar', async () => {
+  const user = userEvent.setup();
+  const cluster = makeRootCluster();
+  const resourceSearchResult = {
+    results: [],
+    errors: [],
+    search: 'foo',
+  };
+  const resourceSearch = async () => resourceSearchResult;
+  jest
+    .spyOn(useSearch, 'useResourceSearch')
+    .mockImplementation(() => resourceSearch);
+
+  const appContext = new MockAppContext();
+  appContext.workspacesService.setState(draft => {
+    draft.rootClusterUri = cluster.uri;
+  });
+  appContext.clustersService.setState(draftState => {
+    draftState.clusters.set(cluster.uri, cluster);
+  });
+
+  render(
+    <MockAppContextProvider appContext={appContext}>
+      <SearchBarConnected />
+      <p data-testid="unfocusable-element">Lorem ipsum</p>
+    </MockAppContextProvider>
+  );
+
+  await user.type(screen.getByRole('searchbox'), 'foo');
+  expect(screen.getByRole('menu')).toBeInTheDocument();
+
+  act(() => {
+    screen.getByTestId('unfocusable-element').click();
+  });
+  expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+});
+
 const getMockedSearchContext = (): SearchContext.SearchContext => ({
   inputValue: 'foo',
   filters: [],
@@ -323,6 +360,7 @@ const getMockedSearchContext = (): SearchContext.SearchContext => ({
   isOpen: true,
   open: () => {},
   close: () => {},
+  closeWithoutRestoringFocus: () => {},
   resetInput: () => {},
   changeActivePicker: () => {},
   onInputValueChange: () => {},
@@ -334,4 +372,5 @@ const getMockedSearchContext = (): SearchContext.SearchContext => ({
   addWindowEventListener: () => ({
     cleanup: () => {},
   }),
+  makeEventListener: cb => cb,
 });
diff --git a/web/packages/teleterm/src/ui/Search/SearchBar.tsx b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
index fe72479eea36d..a845e23ebafaf 100644
--- a/web/packages/teleterm/src/ui/Search/SearchBar.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
@@ -58,7 +58,9 @@ function SearchBar() {
     isOpen,
     open,
     close,
+    closeWithoutRestoringFocus,
     addWindowEventListener,
+    makeEventListener,
   } = useSearchContext();
   const ctx = useAppContext();
   ctx.clustersService.useState();
@@ -75,6 +77,7 @@ function SearchBar() {
         close();
       }
     };
+
     if (isOpen) {
       const { cleanup } = addWindowEventListener('click', onClickOutside, {
         capture: true,
@@ -83,9 +86,35 @@ function SearchBar() {
     }
   }, [close, isOpen, addWindowEventListener]);
 
-  function handleOnFocus(e: React.FocusEvent) {
-    open(e.relatedTarget);
-  }
+  // closeIfAnotherElementReceivedFocus handles a scenario where the focus shifts from the search
+  // input to another element on page. It does nothing if there's no other element that receives
+  // focus, i.e. the user clicks on an unfocusable element (for example, the empty space between the
+  // search bar and the profile selector).
+  //
+  // If that element is present though, onBlur takes precedence over onClickOutside. For example,
+  // clicking on a button outside of the search bar will trigger onBlur and will not trigger
+  // onClickOutside.
+  const closeIfAnotherElementReceivedFocus = makeEventListener(
+    (event: FocusEvent) => {
+      const elementReceivingFocus = event.relatedTarget;
+
+      if (!(elementReceivingFocus instanceof Node)) {
+        // event.relatedTarget might be undefined if the user clicked on an element that is not
+        // focusable. The element might or might not be inside the search bar, however we have no way
+        // of knowing that. Instead of closing the search bar, we defer this responsibility to the
+        // onClickOutside handler and return early.
+        //
+        return;
+      }
+
+      const isElementReceivingFocusOutsideOfSearchBar =
+        !containerRef.current.contains(elementReceivingFocus);
+
+      if (isElementReceivingFocusOutsideOfSearchBar) {
+        closeWithoutRestoringFocus(); // without restoring focus
+      }
+    }
+  );
 
   const defaultInputProps = {
     ref: inputRef,
@@ -95,6 +124,10 @@ function SearchBar() {
     onChange: e => {
       onInputValueChange(e.target.value);
     },
+    onFocus: (e: React.FocusEvent) => {
+      open(e.relatedTarget);
+    },
+    onBlur: closeIfAnotherElementReceivedFocus,
     spellCheck: false,
   };
 
@@ -118,7 +151,6 @@ function SearchBar() {
       `}
       justifyContent="center"
       ref={containerRef}
-      onFocus={handleOnFocus}
     >
       {!isOpen && (
         <>
diff --git a/web/packages/teleterm/src/ui/Search/SearchContext.test.tsx b/web/packages/teleterm/src/ui/Search/SearchContext.test.tsx
index 6ebb95ac39316..86f6eb58bc50f 100644
--- a/web/packages/teleterm/src/ui/Search/SearchContext.test.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchContext.test.tsx
@@ -179,3 +179,49 @@ describe('open', () => {
     expect(otherInput).toHaveFocus();
   });
 });
+
+describe('close', () => {
+  it('restores focus on the previously active element', () => {
+    const previouslyActive = {
+      focus: jest.fn(),
+    } as unknown as HTMLInputElement;
+    const { result } = renderHook(() => useSearchContext(), {
+      wrapper: ({ children }) => (
+        <SearchContextProvider>{children}</SearchContextProvider>
+      ),
+    });
+
+    act(() => {
+      result.current.open(previouslyActive);
+    });
+
+    act(() => {
+      result.current.close();
+    });
+
+    expect(previouslyActive.focus).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('closeWithoutRestoringFocus', () => {
+  it('does not restore focus on the previously active element', () => {
+    const previouslyActive = {
+      focus: jest.fn(),
+    } as unknown as HTMLInputElement;
+    const { result } = renderHook(() => useSearchContext(), {
+      wrapper: ({ children }) => (
+        <SearchContextProvider>{children}</SearchContextProvider>
+      ),
+    });
+
+    act(() => {
+      result.current.open(previouslyActive);
+    });
+
+    act(() => {
+      result.current.closeWithoutRestoringFocus();
+    });
+
+    expect(previouslyActive.focus).not.toHaveBeenCalled();
+  });
+});
diff --git a/web/packages/teleterm/src/ui/Search/SearchContext.tsx b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
index 7f17ee454353e..1e89fdd8e313c 100644
--- a/web/packages/teleterm/src/ui/Search/SearchContext.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
@@ -38,11 +38,15 @@ export interface SearchContext {
   isOpen: boolean;
   open(fromElement?: Element): void;
   close(): void;
+  closeWithoutRestoringFocus(): void;
   resetInput(): void;
   setFilter(filter: SearchFilter): void;
   removeFilter(filter: SearchFilter): void;
   pauseUserInteraction(action: () => Promise<any>): Promise<void>;
   addWindowEventListener: AddWindowEventListener;
+  makeEventListener: <EventListener>(
+    eventListener: EventListener
+  ) => EventListener | undefined;
 }
 
 export type AddWindowEventListener = (
@@ -54,7 +58,7 @@ export type AddWindowEventListener = (
 const SearchContext = createContext<SearchContext>(null);
 
 export const SearchContextProvider: FC = props => {
-  const previouslyActive = useRef<Element>();
+  const previouslyActive = useRef<HTMLElement>();
   const inputRef = useRef<HTMLInputElement>();
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -76,16 +80,21 @@ export const SearchContextProvider: FC = props => {
   const close = useCallback(() => {
     setIsOpen(false);
     setActivePicker(actionPicker);
-    if (previouslyActive.current instanceof HTMLElement) {
+    if (previouslyActive.current) {
       previouslyActive.current.focus();
     }
   }, []);
 
+  const closeWithoutRestoringFocus = useCallback(() => {
+    previouslyActive.current = undefined;
+    close();
+  }, [close]);
+
   const resetInput = useCallback(() => {
     setInputValue('');
   }, []);
 
-  function open(fromElement?: Element): void {
+  function open(fromElement?: HTMLElement): void {
     if (isOpen) {
       // Even if the search bar is already open, we want to focus on the input anyway. The search
       // input might lose focus due to user interaction while the search bar stays open. Focusing
@@ -98,7 +107,8 @@ export const SearchContextProvider: FC = props => {
       return;
     }
 
-    previouslyActive.current = fromElement || document.activeElement;
+    previouslyActive.current =
+      fromElement || (document.activeElement as HTMLElement);
     setIsOpen(true);
   }
 
@@ -158,6 +168,22 @@ export const SearchContextProvider: FC = props => {
     [isUserInteractionPaused]
   );
 
+  /**
+   * makeEventListener is similar to addWindowEventListener but meant for situations where you want
+   * to add a listener to an element directly. By wrapping the listener in makeEventListener, you
+   * make sure that the listener will be removed when the interaction with the search bar is paused.
+   */
+  const makeEventListener = useCallback(
+    eventListener => {
+      if (isUserInteractionPaused) {
+        return;
+      }
+
+      return eventListener;
+    },
+    [isUserInteractionPaused]
+  );
+
   function setFilter(filter: SearchFilter) {
     // UI prevents adding more than one filter of the same type
     setFilters(prevState => [...prevState, filter]);
@@ -192,8 +218,10 @@ export const SearchContextProvider: FC = props => {
         isOpen,
         open,
         close,
+        closeWithoutRestoringFocus,
         pauseUserInteraction,
         addWindowEventListener,
+        makeEventListener,
       }}
       children={props.children}
     />

From 41d7d02fb2281034426173b26445354b1182d471 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Wed, 26 Apr 2023 13:15:27 +0200
Subject: [PATCH 4/8] Remove nesting from handling outside click

---
 web/packages/teleterm/src/ui/Search/SearchBar.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/packages/teleterm/src/ui/Search/SearchBar.tsx b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
index a845e23ebafaf..1ae3bcc5c827e 100644
--- a/web/packages/teleterm/src/ui/Search/SearchBar.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
@@ -71,19 +71,22 @@ function SearchBar() {
     },
   });
 
+  // Handle outside click when the search bar is open.
   useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
     const onClickOutside = e => {
       if (!e.composedPath().includes(containerRef.current)) {
         close();
       }
     };
 
-    if (isOpen) {
-      const { cleanup } = addWindowEventListener('click', onClickOutside, {
-        capture: true,
-      });
-      return cleanup;
-    }
+    const { cleanup } = addWindowEventListener('click', onClickOutside, {
+      capture: true,
+    });
+    return cleanup;
   }, [close, isOpen, addWindowEventListener]);
 
   // closeIfAnotherElementReceivedFocus handles a scenario where the focus shifts from the search

From 7b55beadd7869de3ea9c53e94d65dc35c94f5547 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Thu, 27 Apr 2023 10:34:55 +0200
Subject: [PATCH 5/8] SearchContext: Rename onInputValueChange to setInputValue

---
 web/packages/teleterm/src/ui/Search/SearchBar.test.tsx | 2 +-
 web/packages/teleterm/src/ui/Search/SearchBar.tsx      | 4 ++--
 web/packages/teleterm/src/ui/Search/SearchContext.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx b/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx
index 822163c7091f9..2f2eeecdec33d 100644
--- a/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchBar.test.tsx
@@ -363,7 +363,7 @@ const getMockedSearchContext = (): SearchContext.SearchContext => ({
   closeWithoutRestoringFocus: () => {},
   resetInput: () => {},
   changeActivePicker: () => {},
-  onInputValueChange: () => {},
+  setInputValue: () => {},
   activePicker: pickers.actionPicker,
   inputRef: undefined,
   pauseUserInteraction: async cb => {
diff --git a/web/packages/teleterm/src/ui/Search/SearchBar.tsx b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
index 1ae3bcc5c827e..52f811887edb1 100644
--- a/web/packages/teleterm/src/ui/Search/SearchBar.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
@@ -53,7 +53,7 @@ function SearchBar() {
   const {
     activePicker,
     inputValue,
-    onInputValueChange,
+    setInputValue,
     inputRef,
     isOpen,
     open,
@@ -125,7 +125,7 @@ function SearchBar() {
     placeholder: activePicker.placeholder,
     value: inputValue,
     onChange: e => {
-      onInputValueChange(e.target.value);
+      setInputValue(e.target.value);
     },
     onFocus: (e: React.FocusEvent) => {
       open(e.relatedTarget);
diff --git a/web/packages/teleterm/src/ui/Search/SearchContext.tsx b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
index 1e89fdd8e313c..8798bebf6415e 100644
--- a/web/packages/teleterm/src/ui/Search/SearchContext.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
@@ -33,7 +33,7 @@ export interface SearchContext {
   inputValue: string;
   filters: SearchFilter[];
   activePicker: SearchPicker;
-  onInputValueChange(value: string): void;
+  setInputValue(value: string): void;
   changeActivePicker(picker: SearchPicker): void;
   isOpen: boolean;
   open(fromElement?: Element): void;
@@ -208,7 +208,7 @@ export const SearchContextProvider: FC = props => {
       value={{
         inputRef,
         inputValue,
-        onInputValueChange: setInputValue,
+        setInputValue,
         changeActivePicker,
         activePicker,
         filters,

From 4f9077eb70fb5ed6e78c17e829806ccd64cc21a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Thu, 4 May 2023 18:02:59 +0200
Subject: [PATCH 6/8] Do proper type check before calling focus on
 previouslyActive

---
 .../teleterm/src/ui/Search/SearchContext.tsx       | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/packages/teleterm/src/ui/Search/SearchContext.tsx b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
index 8798bebf6415e..18bc7c16dd5e7 100644
--- a/web/packages/teleterm/src/ui/Search/SearchContext.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
@@ -58,7 +58,8 @@ export type AddWindowEventListener = (
 const SearchContext = createContext<SearchContext>(null);
 
 export const SearchContextProvider: FC = props => {
-  const previouslyActive = useRef<HTMLElement>();
+  // The type of the ref is Element to adhere to the type of document.activeElement.
+  const previouslyActive = useRef<Element>();
   const inputRef = useRef<HTMLInputElement>();
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -80,7 +81,13 @@ export const SearchContextProvider: FC = props => {
   const close = useCallback(() => {
     setIsOpen(false);
     setActivePicker(actionPicker);
-    if (previouslyActive.current) {
+    if (
+      // The Element type is not guaranteed to have the focus function so we're forced to manually
+      // perform the type check.
+      previouslyActive.current &&
+      'focus' in previouslyActive.current &&
+      typeof previouslyActive.current.focus === 'function'
+    ) {
       previouslyActive.current.focus();
     }
   }, []);
@@ -107,8 +114,7 @@ export const SearchContextProvider: FC = props => {
       return;
     }
 
-    previouslyActive.current =
-      fromElement || (document.activeElement as HTMLElement);
+    previouslyActive.current = fromElement || document.activeElement;
     setIsOpen(true);
   }
 

From 2b4773fef8640196d94740081a8bf2f870caebdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 5 May 2023 12:02:36 +0200
Subject: [PATCH 7/8] Add a temp workaround for tsc issue

---
 web/packages/teleterm/src/ui/Search/SearchContext.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/packages/teleterm/src/ui/Search/SearchContext.tsx b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
index 18bc7c16dd5e7..6dee668bac464 100644
--- a/web/packages/teleterm/src/ui/Search/SearchContext.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
@@ -88,7 +88,8 @@ export const SearchContextProvider: FC = props => {
       'focus' in previouslyActive.current &&
       typeof previouslyActive.current.focus === 'function'
     ) {
-      previouslyActive.current.focus();
+      // TODO(ravicious): Revert this to a regular `focus()` call once #25683 gets merged.
+      previouslyActive.current['focus']();
     }
   }, []);
 

From e50de428860e160d049d2417cfc7f6ce137d48b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 5 May 2023 12:40:28 +0200
Subject: [PATCH 8/8] Make TypeScript 4.8.4 happy

---
 web/packages/teleterm/src/ui/Search/SearchContext.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/web/packages/teleterm/src/ui/Search/SearchContext.tsx b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
index 6dee668bac464..df18cc71468fb 100644
--- a/web/packages/teleterm/src/ui/Search/SearchContext.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchContext.tsx
@@ -84,12 +84,10 @@ export const SearchContextProvider: FC = props => {
     if (
       // The Element type is not guaranteed to have the focus function so we're forced to manually
       // perform the type check.
-      previouslyActive.current &&
-      'focus' in previouslyActive.current &&
-      typeof previouslyActive.current.focus === 'function'
+      previouslyActive.current
     ) {
-      // TODO(ravicious): Revert this to a regular `focus()` call once #25683 gets merged.
-      previouslyActive.current['focus']();
+      // TODO(ravicious): Revert to a regular `focus()` call (#25186@4f9077eb7) once #25683 gets in.
+      previouslyActive.current['focus']?.();
     }
   }, []);