Fix #2166 fix search bar not collapse after blur

Author: gbtami

client/main.ts

@@ -58,6 +58,7 @@ import { initCommunityVariantFavorites } from './communityVariants';
 import { gameSearchView, initGameSearch } from './gameSearch';
 import { initProfileActionOverflow } from './profileActionOverflow';
 import { initVariantAuthors } from './variantAuthors';
+import { initSearchBarDismissal } from './searchBar';
 
 // redirect to correct URL except Heroku preview/dev apps
 if (
@@ -302,6 +303,8 @@ function start() {
             setTimeout(() => searchInput.focus(), 200);
     };
 
+    initSearchBarDismissal(searchBar);
+
     function showResults(val: string) {
         const acResult = document.getElementById('ac-result') as HTMLElement;
         if (val.length < 4) {

client/searchBar.ts

@@ -0,0 +1,27 @@
+export function initSearchBarDismissal(searchBar: HTMLElement): () => void {
+    let focusOutTimer: number | undefined;
+
+    const collapse = () => searchBar.classList.remove('active');
+
+    const onDocumentClick = (event: MouseEvent) => {
+        const target = event.target;
+        if (target instanceof Node && !searchBar.contains(target)) collapse();
+    };
+
+    const onFocusOut = () => {
+        if (focusOutTimer !== undefined) window.clearTimeout(focusOutTimer);
+        focusOutTimer = window.setTimeout(() => {
+            focusOutTimer = undefined;
+            if (!searchBar.contains(document.activeElement)) collapse();
+        });
+    };
+
+    document.addEventListener('click', onDocumentClick);
+    searchBar.addEventListener('focusout', onFocusOut);
+
+    return () => {
+        document.removeEventListener('click', onDocumentClick);
+        searchBar.removeEventListener('focusout', onFocusOut);
+        if (focusOutTimer !== undefined) window.clearTimeout(focusOutTimer);
+    };
+}

tests/searchBar.test.ts

@@ -0,0 +1,70 @@
+import { afterEach, beforeEach, describe, expect, jest, test } from '@jest/globals';
+
+import { initSearchBarDismissal } from '../client/searchBar';
+
+jest.useFakeTimers();
+
+let cleanup: (() => void) | undefined;
+
+function setupSearchBar() {
+    document.body.innerHTML = `
+        <form class="search-bar active">
+            <button class="search-icon" type="button">Search</button>
+            <input id="search-input" type="text">
+            <div id="ac-result"><a href="/@/tester">tester</a></div>
+        </form>
+        <button id="outside" type="button">Outside</button>
+    `;
+
+    const searchBar = document.querySelector('.search-bar') as HTMLElement;
+    const searchInput = document.querySelector('#search-input') as HTMLInputElement;
+    const resultLink = document.querySelector('#ac-result a') as HTMLAnchorElement;
+    const outside = document.querySelector('#outside') as HTMLButtonElement;
+    cleanup = initSearchBarDismissal(searchBar);
+
+    return { searchBar, searchInput, resultLink, outside };
+}
+
+beforeEach(() => {
+    document.body.innerHTML = '';
+});
+
+afterEach(() => {
+    cleanup?.();
+    cleanup = undefined;
+    jest.clearAllTimers();
+    document.body.innerHTML = '';
+});
+
+describe('header user search dismissal', () => {
+    test('stays open for clicks inside the search bar and closes for outside clicks', () => {
+        const { searchBar, resultLink, outside } = setupSearchBar();
+
+        resultLink.addEventListener('click', event => event.preventDefault(), { once: true });
+        resultLink.click();
+        expect(searchBar.classList.contains('active')).toBe(true);
+
+        outside.click();
+        expect(searchBar.classList.contains('active')).toBe(false);
+    });
+
+    test('stays open when focus moves to an autocomplete result', () => {
+        const { searchBar, searchInput, resultLink } = setupSearchBar();
+
+        searchInput.focus();
+        resultLink.focus();
+        jest.runOnlyPendingTimers();
+
+        expect(searchBar.classList.contains('active')).toBe(true);
+    });
+
+    test('closes when the search input loses focus outside the search bar', () => {
+        const { searchBar, searchInput, outside } = setupSearchBar();
+
+        searchInput.focus();
+        outside.focus();
+        jest.runOnlyPendingTimers();
+
+        expect(searchBar.classList.contains('active')).toBe(false);
+    });
+});