fix: update TemplateSearchPicker to maintain selected template name on change
This commit is contained in:
@@ -22,6 +22,7 @@ interface TemplateSearchPickerProps {
|
|||||||
export function TemplateSearchPicker({value, initialName, onChange}: TemplateSearchPickerProps) {
|
export function TemplateSearchPicker({value, initialName, onChange}: TemplateSearchPickerProps) {
|
||||||
const [query, setQuery] = useState(initialName ?? '');
|
const [query, setQuery] = useState(initialName ?? '');
|
||||||
const [prevInitialName, setPrevInitialName] = useState(initialName);
|
const [prevInitialName, setPrevInitialName] = useState(initialName);
|
||||||
|
const [selectedName, setSelectedName] = useState(initialName ?? '');
|
||||||
const [debouncedQuery, setDebouncedQuery] = useState('');
|
const [debouncedQuery, setDebouncedQuery] = useState('');
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
@@ -29,6 +30,7 @@ export function TemplateSearchPicker({value, initialName, onChange}: TemplateSea
|
|||||||
if (initialName !== prevInitialName) {
|
if (initialName !== prevInitialName) {
|
||||||
setPrevInitialName(initialName);
|
setPrevInitialName(initialName);
|
||||||
setQuery(initialName ?? '');
|
setQuery(initialName ?? '');
|
||||||
|
if (initialName) setSelectedName(initialName);
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
@@ -49,7 +51,7 @@ export function TemplateSearchPicker({value, initialName, onChange}: TemplateSea
|
|||||||
// When closed, show the selected template's name rather than the raw query
|
// When closed, show the selected template's name rather than the raw query
|
||||||
const displayValue = open
|
const displayValue = open
|
||||||
? query
|
? query
|
||||||
: (value ? (data?.data.find(t => t.id === value)?.name ?? initialName ?? value) : '');
|
: (value ? (data?.data.find(t => t.id === value)?.name ?? selectedName ?? initialName ?? '') : '');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
@@ -85,6 +87,7 @@ export function TemplateSearchPicker({value, initialName, onChange}: TemplateSea
|
|||||||
onSelect={() => {
|
onSelect={() => {
|
||||||
onChange(t.id);
|
onChange(t.id);
|
||||||
setQuery(t.name);
|
setQuery(t.name);
|
||||||
|
setSelectedName(t.name);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user