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)

web/src/components/layout-recognize-form-field.tsx

@@ -3,7 +3,7 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
 import { cn } from '@/lib/utils';
 import { camelCase } from 'lodash';
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { SelectWithSearch } from './originui/select-with-search';
 import {
@@ -23,10 +23,12 @@ export function LayoutRecognizeFormField({
   name = 'parser_config.layout_recognize',
   horizontal = true,
   optionsWithoutLLM,
+  label,
 }: {
   name?: string;
   horizontal?: boolean;
   optionsWithoutLLM?: { value: string; label: string }[];
+  label?: ReactNode;
 }) {
   const form = useFormContext();
 
@@ -81,7 +83,7 @@ export function LayoutRecognizeFormField({
                   ['w-1/4']: horizontal,
                 })}
               >
-                {t('layoutRecognize')}
+                {label || t('layoutRecognize')}
               </FormLabel>
               <div className={horizontal ? 'w-3/4' : 'w-full'}>
                 <FormControl>

web/src/components/originui/select-with-search.tsx

@@ -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>