Merge e182e03804 into 8278b39f85

web/app/components/base/chat/chat-with-history/inputs-form/content.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useChatWithHistoryContext } from '../context'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { PortalSelect } from '@/app/components/base/select'
+import Select from '@/app/components/base/select'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import { InputVarType } from '@/app/components/workflow/types'
 
@@ -71,13 +71,14 @@ const InputsFormContent = ({ showTip }: Props) => {
             />
           )}
           {form.type === InputVarType.select && (
-            <PortalSelect
-              popupClassName='w-[200px]'
-              value={inputsFormValue?.[form.variable]}
-              items={form.options.map((option: string) => ({ value: option, name: option }))}
-              onSelect={item => handleFormChange(form.variable, item.value as string)}
-              placeholder={form.label}
-            />
+            <Select
+                placeholder={form.label}
+                className='w-full'
+                defaultValue={inputsFormValue?.[form.variable]}
+                onSelect={item => handleFormChange(form.variable, item.value as string)}
+                items={form.options.map((option: string) => ({ value: option, name: option }))}
+                allowSearch={true}
+              />
           )}
           {form.type === InputVarType.singleFile && (
             <FileUploaderInAttachmentWrapper

web/app/components/base/select/index.tsx

@@ -61,6 +61,7 @@ const Select: FC<ISelectProps> = ({
   disabled = false,
   onSelect,
   allowSearch = true,
+  placeholder = '',
   bgClassName = 'bg-components-input-bg-normal',
   overlayClassName,
   optionClassName,
@@ -90,11 +91,12 @@ const Select: FC<ISelectProps> = ({
   return (
     <Combobox
       as="div"
+      immediate={true}
       disabled={disabled}
       value={selectedItem}
       className={className}
       onChange={(value: Item) => {
-        if (!disabled) {
+        if (!disabled && value) {
           setSelectedItem(value)
           setOpen(false)
           onSelect(value)
@@ -104,6 +106,7 @@ const Select: FC<ISelectProps> = ({
         <div className='group text-text-secondary'>
           {allowSearch
             ? <ComboboxInput
+              placeholder={placeholder}
               className={`w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
               onChange={(event) => {
                 if (!disabled)
@@ -129,7 +132,6 @@ const Select: FC<ISelectProps> = ({
           </ComboboxButton>
         </div>
 
-        {(filteredItems.length > 0 && open) && (
           <ComboboxOptions className={`absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-1 py-1 text-base shadow-lg backdrop-blur-sm focus:outline-none sm:text-sm ${overlayClassName}`}>
             {filteredItems.map((item: Item) => (
               <ComboboxOption
@@ -166,7 +168,6 @@ const Select: FC<ISelectProps> = ({
               </ComboboxOption>
             ))}
           </ComboboxOptions>
-        )}
       </div>
     </Combobox >
   )