fix: raise chat settings select dropdown above dialog (#35357)

Co-authored-by: Stephen Zhou <hi@hyoban.cc>

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

@@ -248,6 +248,19 @@ describe('InputsFormContent', () => {
     expect(mockSetCurrentConversationInputs).toHaveBeenCalledWith(expect.objectContaining({ sel: 'A' }))
   })
 
+  it('renders select dropdown above the settings dialog layer', async () => {
+    const user = userEvent.setup()
+    const context = createMockContext({
+      inputsForms: [{ variable: 'sel', type: InputVarType.select, label: 'Sel', options: ['A', 'B'], default: 'B' }],
+      currentConversationInputs: {},
+    })
+
+    renderWithContext(<InputsFormContent />, context)
+    await user.click(screen.getByText('B'))
+
+    expect(screen.getByText('A').closest('.z-\\[60\\]')).not.toBeNull()
+  })
+
   it('handles select input with existing value (value not in options -> shows placeholder)', () => {
     const context = createMockContext({
       inputsForms: [{ variable: 'sel', type: InputVarType.select, label: 'Sel', options: ['A'], default: undefined }],

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

@@ -86,7 +86,7 @@ const InputsFormContent = ({ showTip }: Props) => {
           )}
           {form.type === InputVarType.select && (
             <PortalSelect
-              popupClassName="w-[200px]"
+              popupClassName="z-[60] w-[200px]"
               value={inputsFormValue?.[form.variable] ?? form.default ?? ''}
               items={form.options.map((option: string) => ({ value: option, name: option }))}
               onSelect={item => handleFormChange(form.variable, item.value as string)}

web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx

@@ -200,6 +200,17 @@ describe('InputsFormContent', () => {
     expect(mockContextValue.handleNewConversationInputsChange).toHaveBeenCalled()
   })
 
+  it('should render select dropdown above the settings dialog layer', async () => {
+    render(<InputsFormContent />)
+    const selectTrigger = screen.getAllByText(/Select Label/i).find(el => el.tagName === 'SPAN')
+    if (!selectTrigger)
+      throw new Error('Select trigger not found')
+
+    await user.click(selectTrigger)
+
+    expect(screen.getByText('Option 1').closest('.z-\\[60\\]')).not.toBeNull()
+  })
+
   it('should handle single file upload change', async () => {
     render(<InputsFormContent />)
     const uploadButtons = screen.getAllByText('Upload')

web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx

@@ -86,7 +86,7 @@ const InputsFormContent = ({ showTip }: Props) => {
           )}
           {form.type === InputVarType.select && (
             <PortalSelect
-              popupClassName="w-[200px]"
+              popupClassName="z-[60] w-[200px]"
               value={inputsFormValue?.[form.variable] ?? form.default ?? ''}
               items={form.options.map((option: string) => ({ value: option, name: option }))}
               onSelect={item => handleFormChange(form.variable, item.value as string)}