chore: refactoring code

Author: Hubert Koster

src/components/UserNavbarItem/__tests__/item.desktop.test.tsx

@@ -71,7 +71,12 @@ describe('User Navbar Desktop Item', () => {
   });
   describe('Search popup', () => {
     beforeEach(() => {
-      render(<UserNavbarDesktopItem is_logged_in={false} authUrl={'https://www.example.com'} />);
+      render(
+        <React.Fragment>
+          <UserNavbarDesktopItem is_logged_in={false} authUrl={'https://www.example.com'} />
+          <input type='text' placeholder='search' className='navbar__search-input' />
+        </React.Fragment>,
+      );
     });
 
     afterEach(() => {
@@ -85,6 +90,16 @@ describe('User Navbar Desktop Item', () => {
       expect(navigation.classList.contains('search-open'));
     });
 
+    it('should focus the input after using the hotkey command', async () => {
+      await userEvent.keyboard('{Meta>}[KeyK]{/Meta}');
+
+      const navigation = screen.getByRole('navigation');
+      expect(navigation.classList.contains('search-open'));
+
+      const input = screen.getByPlaceholderText('search');
+      expect(input).toHaveFocus();
+    });
+
     it('should be able to close search on same hotkey command', async () => {
       await userEvent.keyboard('{Meta>}[KeyK]{/Meta}');
 

src/components/UserNavbarItem/item.desktop.tsx

@@ -11,18 +11,6 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps)
   const location = useLocation();
   const nav_ref = useRef(null);
 
-  // This is the only React way to access and focus the search input from the 3rd party library we use
-  const focusSearchInput = () => {
-    // For some reason, this library wraps the search in a new element after triggering the search the first time
-    const focusInput = () =>
-      nav_ref && nav_ref?.current?.nextElementSibling?.firstChild?.firstChild?.focus?.();
-    const focusNestedInput = () =>
-      nav_ref &&
-      nav_ref?.current?.nextElementSibling?.firstChild?.firstChild?.firstChild?.focus?.();
-
-    focusInput() ?? focusNestedInput();
-  };
-
   const closeSearchHotkey = (event) => {
     const press_escape = event.key === 'Escape';
     const press_cmd_and_k = event.metaKey && event.key === 'k';
@@ -36,6 +24,15 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps)
     if (press_cmd_and_k) setToggleSearch(true);
   };
 
+  const focusSearchInput = () => {
+    // Using vanilla JS to get the element since it's a 3rd party library. I cannot access through React.
+    const search_input = document.querySelector('.navbar__search-input');
+    if (search_input) {
+      const focusInput = () => (search_input as HTMLElement).focus();
+      focusInput();
+    }
+  };
+
   useEffect(() => {
     setToggleSearch(false);
   }, [location]);