From db4958be05cc6e7ed777926e891582ab70f9274e Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 23 May 2025 17:52:00 +0800
Subject: [PATCH] fix: fix modal handling in InputFieldEditor

---
 .../input-field/editor/dialog-wrapper.tsx     | 54 +++++++++++++++++++
 .../components/input-field/editor/index.tsx   | 37 ++++++-------
 2 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 web/app/components/rag-pipeline/components/input-field/editor/dialog-wrapper.tsx

diff --git a/web/app/components/rag-pipeline/components/input-field/editor/dialog-wrapper.tsx b/web/app/components/rag-pipeline/components/input-field/editor/dialog-wrapper.tsx
new file mode 100644
index 0000000000..c3c877eaf4
--- /dev/null
+++ b/web/app/components/rag-pipeline/components/input-field/editor/dialog-wrapper.tsx
@@ -0,0 +1,54 @@
+import { Fragment, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
+import cn from '@/utils/classnames'
+
+type DialogWrapperProps = {
+  className?: string
+  panelWrapperClassName?: string
+  children: ReactNode
+  show: boolean
+  onClose?: () => void
+}
+
+const DialogWrapper = ({
+  className,
+  panelWrapperClassName,
+  children,
+  show,
+  onClose,
+}: DialogWrapperProps) => {
+  const close = useCallback(() => onClose?.(), [onClose])
+  return (
+    <Transition appear show={show} as={Fragment}>
+      <Dialog as='div' className='relative z-40' onClose={close}>
+        <TransitionChild>
+          <div className={cn(
+            'fixed inset-0 bg-black/25',
+            'data-[closed]:opacity-0',
+            'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+            'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
+          )} />
+        </TransitionChild>
+
+        <div className='fixed inset-0 overflow-y-auto'>
+          <div className={cn('flex min-h-full flex-col items-end justify-start pb-1 pt-[116px]', panelWrapperClassName)}>
+            <TransitionChild>
+              <DialogPanel className={cn(
+                'relative flex w-[400px] flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl shadow-shadow-shadow-9 transition-all',
+                'data-[closed]:scale-95  data-[closed]:opacity-0',
+                'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+                'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
+                className,
+              )}>
+                {children}
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition >
+  )
+}
+
+export default DialogWrapper
diff --git a/web/app/components/rag-pipeline/components/input-field/editor/index.tsx b/web/app/components/rag-pipeline/components/input-field/editor/index.tsx
index 5641400e3e..77882f0259 100644
--- a/web/app/components/rag-pipeline/components/input-field/editor/index.tsx
+++ b/web/app/components/rag-pipeline/components/input-field/editor/index.tsx
@@ -1,5 +1,5 @@
 import { RiCloseLine } from '@remixicon/react'
-import DialogWrapper from '../dialog-wrapper'
+import DialogWrapper from './dialog-wrapper'
 import InputFieldForm from './form'
 import { convertToInputFieldFormData } from './utils'
 import { useCallback } from 'react'
@@ -60,27 +60,24 @@ const InputFieldEditor = ({
     <DialogWrapper
       show={show}
       onClose={onClose}
-      panelWrapperClassName='pr-[424px] justify-start'
-      className='w-[400px] grow-0 rounded-2xl border-[0.5px] bg-components-panel-bg shadow-shadow-shadow-9'
+      panelWrapperClassName='pr-[424px]'
     >
-      <div className='relative flex h-fit flex-col'>
-        <div className='system-xl-semibold flex items-center pb-1 pl-4 pr-11 pt-3.5 text-text-primary'>
-          {initialData ? t('datasetPipeline.inputFieldPanel.editInputField') : t('datasetPipeline.inputFieldPanel.addInputField')}
-        </div>
-        <button
-          type='button'
-          className='absolute right-2.5 top-2.5 flex size-8 items-center justify-center'
-          onClick={onClose}
-        >
-          <RiCloseLine className='size-4 text-text-tertiary' />
-        </button>
-        <InputFieldForm
-          initialData={formData}
-          supportFile
-          onCancel={onClose}
-          onSubmit={handleSubmit}
-        />
+      <div className='system-xl-semibold flex items-center pb-1 pl-4 pr-11 pt-3.5 text-text-primary'>
+        {initialData ? t('datasetPipeline.inputFieldPanel.editInputField') : t('datasetPipeline.inputFieldPanel.addInputField')}
       </div>
+      <button
+        type='button'
+        className='absolute right-2.5 top-2.5 flex size-8 items-center justify-center'
+        onClick={onClose}
+      >
+        <RiCloseLine className='size-4 text-text-tertiary' />
+      </button>
+      <InputFieldForm
+        initialData={formData}
+        supportFile
+        onCancel={onClose}
+        onSubmit={handleSubmit}
+      />
     </DialogWrapper>
   )
 }