Skip to content

feat(webui): Focus/refocus query input box for ease of use. #1160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 6, 2025
+15 −1
Merged

feat(webui): Focus/refocus query input box for ease of use. #1160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a4f6cb5
latest
Aug 4, 2025
00e9182
Merge branch 'main' into focus
hoophalab Aug 4, 2025
da31c7e
Merge branch 'main' into focus
davemarco Aug 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion components/webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
Input,
InputProps,
InputRef,
} from "antd";

import CaseSensitiveToggle, {CaseSensitiveToggleProps} from "./CaseSenstiveToggle";
Expand All @@ -9,7 +10,8 @@ import CaseSensitiveToggle, {CaseSensitiveToggleProps} from "./CaseSenstiveToggl
/**
* Antd Input props and case sensitive toggle props with suffix omitted since set by component.
*/
type InputWithCaseSensitiveProps = Omit<InputProps, "suffix"> & CaseSensitiveToggleProps;
type InputWithCaseSensitiveProps =
Omit<InputProps, "suffix"> & CaseSensitiveToggleProps & React.RefAttributes<InputRef>;

/**
* Antd Input with a built-in case sensitivity toggle.
Expand Down
12 changes: 12 additions & 0 deletions components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
useState,
} from "react";

import type {InputRef} from "antd";
import {Nullable} from "src/typings/common";

import QueryBox from "../../../../components/QueryBox";
Expand All @@ -28,6 +29,7 @@ const QueryInput = () => {
const searchUiState = useSearchStore((state) => state.searchUiState);
const [pseudoProgress, setPseudoProgress] = useState<Nullable<number>>(null);
const intervalIdRef = useRef<number>(0);
const inputRef = useRef<InputRef>(null);

const handleCaseSensitiveChange = useCallback((newValue: boolean) => {
const {updateQueryIsCaseSensitive} = useSearchStore.getState();
Expand Down Expand Up @@ -67,11 +69,21 @@ const QueryInput = () => {
clearInterval(intervalIdRef.current);
}, []);

useEffect(() => {
if (
searchUiState === SEARCH_UI_STATE.DEFAULT ||
searchUiState === SEARCH_UI_STATE.DONE
) {
inputRef.current?.focus();
}
}, [searchUiState]);

return (
<QueryBox
isCaseSensitive={queryIsCaseSensitive}
placeholder={"Enter your query"}
progress={pseudoProgress}
ref={inputRef}
size={"large"}
value={queryString}
disabled={
Expand Down