opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): remove invalid Autocomplete hooks (#27177)

Browse Source
This commit is contained in:
Danielle Maywood
2026-07-13 09:06:36 +01:00
committed by GitHub
parent ea4554025e
commit 27ed052d86
1 changed files with 5 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/Autocomplete/Autocomplete.tsx
+5 -15
View File
@@ -4,7 +4,6 @@ import {
type ReactNode, type ReactNode,
type SyntheticEvent, type SyntheticEvent,
useCallback, useCallback,
useEffect,
useId, useId,
useRef, useRef,
useState, useState,
@@ -83,7 +82,6 @@ export function Autocomplete<TOption>({
"data-testid": testId, "data-testid": testId,
}: AutocompleteProps<TOption>) { }: AutocompleteProps<TOption>) {
const inlineInputRef = useRef<HTMLInputElement>(null); const inlineInputRef = useRef<HTMLInputElement>(null);
const highlightedValueRef = useRef<string | null>(null);
const [managedOpen, setManagedOpen] = useState(false); const [managedOpen, setManagedOpen] = useState(false);
const [managedInputValue, setManagedInputValue] = useState(""); const [managedInputValue, setManagedInputValue] = useState("");
const [highlightedValue, setHighlightedValue] = useState<string | null>(null); const [highlightedValue, setHighlightedValue] = useState<string | null>(null);
@@ -91,7 +89,6 @@ export function Autocomplete<TOption>({
const listboxId = `${generatedListboxId}-listbox`; const listboxId = `${generatedListboxId}-listbox`;
const updateHighlightedValue = useCallback((newValue: string | null) => { const updateHighlightedValue = useCallback((newValue: string | null) => {
highlightedValueRef.current = newValue;
setHighlightedValue(newValue); setHighlightedValue(newValue);
}, []); }, []);
const isOpen = controlledOpen ?? managedOpen; const isOpen = controlledOpen ?? managedOpen;
@@ -166,20 +163,13 @@ export function Autocomplete<TOption>({
[handleOpenChange, onEscapeKeyDown], [handleOpenChange, onEscapeKeyDown],
); );
useEffect(() => {
if (
highlightedValue !== null &&
!options.some((option) => getOptionValue(option) === highlightedValue)
) {
updateHighlightedValue(null);
}
}, [highlightedValue, options, getOptionValue, updateHighlightedValue]);
const displayValue = value ? getOptionLabel(value) : ""; const displayValue = value ? getOptionLabel(value) : "";
const showClearButton = clearable && value && !disabled; const showClearButton = clearable && value && !disabled;
const highlightedIndex = options.findIndex( const highlightedIndex = options.findIndex(
(option) => getOptionValue(option) === highlightedValue, (option) => getOptionValue(option) === highlightedValue,
); );
const effectiveHighlightedValue =
highlightedIndex >= 0 ? highlightedValue : null;
const activeDescendant = const activeDescendant =
highlightedIndex >= 0 highlightedIndex >= 0
? `${listboxId}-option-${highlightedIndex}` ? `${listboxId}-option-${highlightedIndex}`
@@ -202,7 +192,7 @@ export function Autocomplete<TOption>({
} }
const currentIndex = options.findIndex( const currentIndex = options.findIndex(
(option) => getOptionValue(option) === highlightedValueRef.current, (option) => getOptionValue(option) === highlightedValue,
); );
const nextIndex = const nextIndex =
e.key === "ArrowDown" e.key === "ArrowDown"
@@ -226,7 +216,7 @@ export function Autocomplete<TOption>({
} }
const highlightedOption = options.find( const highlightedOption = options.find(
(option) => getOptionValue(option) === highlightedValueRef.current, (option) => getOptionValue(option) === highlightedValue,
); );
if (highlightedOption) { if (highlightedOption) {
handleSelect(highlightedOption); handleSelect(highlightedOption);
@@ -332,7 +322,7 @@ export function Autocomplete<TOption>({
> >
<Command <Command
shouldFilter={false} shouldFilter={false}
value={highlightedValue ?? ""} value={effectiveHighlightedValue ?? ""}
onValueChange={(newValue) => { onValueChange={(newValue) => {
if (newValue) { if (newValue) {
updateHighlightedValue(newValue); updateHighlightedValue(newValue);