diff --git a/gradle/changelog/global_search_click.yaml b/gradle/changelog/global_search_click.yaml new file mode 100644 index 0000000000..e6987fde0b --- /dev/null +++ b/gradle/changelog/global_search_click.yaml @@ -0,0 +1,2 @@ +- type: fixed + description: Race condition sometimes breaking mouse interaction in global search diff --git a/scm-ui/ui-webapp/src/search/search-box/SearchBox.tsx b/scm-ui/ui-webapp/src/search/search-box/SearchBox.tsx index 2b1fe1b277..9b958f7517 100644 --- a/scm-ui/ui-webapp/src/search/search-box/SearchBox.tsx +++ b/scm-ui/ui-webapp/src/search/search-box/SearchBox.tsx @@ -39,6 +39,7 @@ import { SearchBoxContext } from "./SearchBoxContext"; import { SearchBoxInput } from "./SearchBoxInput"; import { SearchBoxOption } from "./SearchBoxOption"; import { SearchBoxOptions } from "./SearchBoxOptions"; +import { useLocation } from "react-router-dom"; const SearchBox = React.forwardRef< HTMLDivElement, @@ -53,6 +54,7 @@ const SearchBox = React.forwardRef< const [options, setOptions] = useState[]>([]); const popupId = useGeneratedId(); const inputRef = useRef(null); + const location = useLocation(); const registerOption = useCallback( (ref: RefObject) => setOptions((prev) => { @@ -84,23 +86,20 @@ const SearchBox = React.forwardRef< (ref: RefObject) => setOptions((prev) => prev.filter((it) => it !== ref)), [] ); + const close = useCallback(() => { + if (open && shouldClear) { + onQueryChange?.(""); + } + setOpen(false); + setActiveId(undefined); + }, [onQueryChange, open, shouldClear]); const handleInputBlur: FocusEventHandler = useCallback( (e) => { - const close = () => { - if (open && shouldClear) { - onQueryChange?.(""); - } - setOpen(false); - setActiveId(undefined); - }; - - if (activeId && e.relatedTarget?.id === activeId) { - setTimeout(close, 100); - } else { + if (!activeId || e.relatedTarget?.id !== activeId) { close(); } }, - [activeId, onQueryChange, open, shouldClear] + [activeId, close] ); const handleInputKeyDown = useCallback( (e: KeyboardEvent) => { @@ -178,6 +177,7 @@ const SearchBox = React.forwardRef< }); } }, [activeId, options]); + useEffect(close, [location]); return (