Skip to content

fix: prevent workspace search bar text from getting garbled #9703

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 11 commits into from
Sep 15, 2023
Merged

fix: prevent workspace search bar text from getting garbled #9703

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
32ebe81
chore: Reorganize hook calls for useWorkspacesFilter
Parkreiner Sep 13, 2023
92006aa
refactor: Clean up some filter logic
Parkreiner Sep 13, 2023
8d10578
refactor: Create debounce utility hooks
Parkreiner Sep 14, 2023
913f944
Merge branch 'main' into filter-fix
Parkreiner Sep 14, 2023
fec4384
docs: Clean up comments for clarity
Parkreiner Sep 14, 2023
2d4d285
fix: Update focus logic to apply for any inner focus
Parkreiner Sep 14, 2023
11c06e1
fix: Add onBlur behavior for state syncs
Parkreiner Sep 15, 2023
551780c
chore: Add progress for debounce test
Parkreiner Sep 15, 2023
3d028a7
chore: Finish tests for debounce hooks
Parkreiner Sep 15, 2023
9ea0e1a
Merge branch 'main' into filter-fix
Parkreiner Sep 15, 2023
83c6022
docs: Add file description and warning
Parkreiner Sep 15, 2023
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
Prev Previous commit
Next Next commit
fix: Update focus logic to apply for any inner focus
  • Loading branch information
@Parkreiner
Parkreiner committed Sep 14, 2023
commit 2d4d2857449c2e92a11a94f31f875a799559e881
23 changes: 14 additions & 9 deletions site/src/components/Filter/filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ import {
} from "api/errors";
import { useFilterMenu } from "./menu";
import { BaseOption } from "./options";
import debounce from "just-debounce-it";
import MenuList from "@mui/material/MenuList";
import { Loader } from "components/Loader/Loader";
import Divider from "@mui/material/Divider";
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
import { useDebouncedFunction } from "hooks/debounce";

export type PresetFilter = {
name: string;
Expand Down Expand Up @@ -58,7 +58,7 @@ export const useFilter = ({
}
};

const debounceUpdate = debounce(
const { debounced: debounceUpdate, cancelDebounce } = useDebouncedFunction(
(values: string | FilterValues) => update(values),
500,
);
Expand All @@ -69,6 +69,7 @@ export const useFilter = ({
query,
update,
debounceUpdate,
cancelDebounce,
values,
used,
};
Expand Down Expand Up @@ -153,19 +154,23 @@ export const Filter = ({
learnMoreLink2,
presets,
}: FilterProps) => {
const shouldDisplayError = hasError(error) && isApiValidationError(error);
const hasFilterQuery = filter.query !== "";
const [searchQuery, setSearchQuery] = useState(filter.query);
const inputRef = useRef<HTMLInputElement>(null);
const textboxInputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
// We don't want to update this while the user is typing something or has the focus in the input
const isFocused = document.activeElement === inputRef.current;
if (!isFocused) {
// We don't want to update this while the user is typing something or has
// the focus in the input
const hasInnerFocus =
textboxInputRef.current?.contains(document.activeElement) ?? false;

if (!hasInnerFocus) {
setSearchQuery(filter.query);
}
}, [filter.query]);

const shouldDisplayError = hasError(error) && isApiValidationError(error);
const hasFilterQuery = filter.query !== "";

return (
<Box
sx={{
Expand Down Expand Up @@ -201,7 +206,7 @@ export const Filter = ({
name: "query",
placeholder: "Search...",
value: searchQuery,
ref: inputRef,
ref: textboxInputRef,
onChange: (e) => {
setSearchQuery(e.target.value);
filter.debounceUpdate(e.target.value);
Expand Down