Fix: Fixed the issue where the drop-down box could not be displayed after selecting a large model #9869 (#10205)

### What problem does this PR solve?

Fix: Fixed the issue where the drop-down box could not be displayed
after selecting a large model #9869

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
balibabu
2025-09-22 17:16:34 +08:00
committed by GitHub
parent 476852e8f1
commit 73c33bc8d2
17 changed files with 180 additions and 205 deletions

View File

@ -49,6 +49,22 @@ export type SelectWithSearchFlagProps = {
placeholder?: string;
};
function findLabelWithoutOptions(
options: SelectWithSearchFlagOptionType[],
value: string,
) {
return options.find((opt) => opt.value === value)?.label || '';
}
function findLabelWithOptions(
options: SelectWithSearchFlagOptionType[],
value: string,
) {
return options
.map((group) => group?.options?.find((item) => item.value === value))
.filter(Boolean)[0]?.label;
}
export const SelectWithSearch = forwardRef<
React.ElementRef<typeof Button>,
SelectWithSearchFlagProps
@ -69,6 +85,28 @@ export const SelectWithSearch = forwardRef<
const [open, setOpen] = useState<boolean>(false);
const [value, setValue] = useState<string>('');
const selectLabel = useMemo(() => {
if (options.every((x) => x.options === undefined)) {
return findLabelWithoutOptions(options, value);
} else if (options.every((x) => Array.isArray(x.options))) {
return findLabelWithOptions(options, value);
} else {
// Some have options, some don't
const optionsWithOptions = options.filter((x) =>
Array.isArray(x.options),
);
const optionsWithoutOptions = options.filter(
(x) => x.options === undefined,
);
const label = findLabelWithOptions(optionsWithOptions, value);
if (label) {
return label;
}
return findLabelWithoutOptions(optionsWithoutOptions, value);
}
}, [options, value]);
const handleSelect = useCallback(
(val: string) => {
setValue(val);
@ -90,16 +128,7 @@ export const SelectWithSearch = forwardRef<
useEffect(() => {
setValue(val);
}, [val]);
const selectLabel = useMemo(() => {
const optionTemp = options[0];
if (optionTemp?.options) {
return options
.map((group) => group?.options?.find((item) => item.value === value))
.filter(Boolean)[0]?.label;
} else {
return options.find((opt) => opt.value === value)?.label || '';
}
}, [options, value]);
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>