fix: prevent blur when selecting text (#4762)

frontend/src/component/common/Search/Search.tsx

@@ -114,7 +114,6 @@ export const Search = ({
     useKeyboardShortcut({ key: 'Escape' }, () => {
         if (searchContainerRef.current?.contains(document.activeElement)) {
             searchInputRef.current?.blur();
-            hideSuggestions();
         }
     });
     const placeholder = `${customPlaceholder ?? 'Search'} (${hotkey})`;

frontend/src/hooks/useOnBlur.ts

@@ -5,24 +5,36 @@ export const useOnBlur = (
     callback: () => void
 ): void => {
     useEffect(() => {
+        let mouseDownInside = false;
+
+        const handleMouseDown = (event: MouseEvent) => {
+            mouseDownInside =
+                containerRef.current?.contains(event.target as Node) || false;
+        };
+
         const handleBlur = (event: FocusEvent) => {
-            // setTimeout is used because activeElement might not immediately be the new focused element after a blur event
             setTimeout(() => {
                 if (
+                    !mouseDownInside &&
                     containerRef.current &&
                     !containerRef.current.contains(document.activeElement)
                 ) {
                     callback();
                 }
+                // Reset the flag for the next sequence of events.
+                mouseDownInside = false;
             }, 0);
         };
 
+        document.addEventListener('mousedown', handleMouseDown);
+
         const containerElement = containerRef.current;
         if (containerElement) {
             containerElement.addEventListener('blur', handleBlur, true);
         }
 
         return () => {
+            document.removeEventListener('mousedown', handleMouseDown);
             if (containerElement) {
                 containerElement.removeEventListener('blur', handleBlur, true);
             }