fix(design): ensure popup component is appended to root to prevent of…

…fset from stacking contexts (#1850)
dream-num · Apr 10, 2024 · 1ad518a · 1ad518a
1 parent 6868a47
commit 1ad518a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/design/src/components/popup/Popup.tsx b/packages/design/src/components/popup/Popup.tsx
@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 
+import { ConfigContext } from '../config-provider/ConfigProvider';
 import styles from './index.module.less';
 
 export interface IPopupProps {
@@ -42,6 +44,8 @@ export function Popup(props: IPopupProps) {
 
     const [realOffset, setRealOffset] = useState<[number, number]>(offset);
 
+    const { mountContainer } = useContext(ConfigContext);
+
     useEffect(() => {
         if (!visible) {
             setRealOffset([-9999, -9999]);
@@ -62,7 +66,7 @@ export function Popup(props: IPopupProps) {
         event.preventDefault();
     }
 
-    return (
+    return createPortal(
         <CSSTransition
             in={visible}
             nodeRef={nodeRef}
@@ -89,6 +93,7 @@ export function Popup(props: IPopupProps) {
             >
                 {children}
             </section>
-        </CSSTransition>
+        </CSSTransition>,
+        mountContainer!
     );
 }
diff --git a/packages/ui/src/components/editor/TextEditor.tsx b/packages/ui/src/components/editor/TextEditor.tsx
@@ -185,7 +185,7 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC
             setValidationVisible(!isLegality);
             const rect = editor.getBoundingClientRect();
 
-            setValidationOffset([rect.left, rect.top - 16]);
+            setValidationOffset([rect.left, rect.top]);
 
             if (editor.onlyInputFormula()) {
                 setValidationContent(localeService.t('textEditor.formulaError'));