fix: 修复 Overlay 定位弹出层部分懒加载导致的定位不准的问题 (baidu#11190)

allenve · Nov 12, 2024 · 1b465ce · 1b465ce
1 parent e55371e
commit 1b465ce
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/packages/amis-core/src/RootRenderer.tsx b/packages/amis-core/src/RootRenderer.tsx
@@ -65,7 +65,9 @@ export class RootRenderer extends React.Component<RootRendererProps> {
           }
         }
       });
-      return loadAsyncRenderersByType(types, true);
+      return hasAsyncRenderers(types)
+        ? loadAsyncRenderersByType(types, true)
+        : undefined;
     });
   }
 

diff --git a/packages/amis-core/src/components/Overlay.tsx b/packages/amis-core/src/components/Overlay.tsx
@@ -42,6 +42,7 @@ class Position extends React.Component<any, any> {
   parentPopover: any;
   // setState: (state: any) => void;
   componentId: string;
+  overlay: HTMLDivElement;
 
   static defaultProps = {
     containerPadding: 0,
@@ -89,16 +90,13 @@ class Position extends React.Component<any, any> {
     }
 
     const watchTargetSizeChange = this.props.watchTargetSizeChange;
-    const overlay = findDOMNode(this as any) as HTMLElement;
+    const overlay = this.overlay;
     const container = getContainer(
       this.props.container,
       ownerDocument(this).body
     );
 
-    if (
-      (!this.watchedTarget || this.watchedTarget !== target) &&
-      getComputedStyle(target, 'position') !== 'static'
-    ) {
+    if (!this.watchedTarget || this.watchedTarget !== target) {
       this.resizeDispose?.forEach(fn => fn());
       this.watchedTarget = target;
       this.resizeDispose = [
@@ -131,6 +129,7 @@ class Position extends React.Component<any, any> {
   }
 
   componentDidMount() {
+    this.overlay = findDOMNode(this) as HTMLDivElement;
     this.updatePosition(this.getTarget());
   }
 

diff --git a/packages/amis-core/src/factory.tsx b/packages/amis-core/src/factory.tsx
@@ -362,8 +362,12 @@ export function isAsyncRenderer(item: RendererConfig) {
   );
 }
 
-export function hasAsyncRenderers() {
-  return renderers.some(isAsyncRenderer);
+export function hasAsyncRenderers(types?: Array<string>) {
+  return (
+    Array.isArray(types)
+      ? renderers.filter(item => item.type && types.includes(item.type))
+      : renderers
+  ).some(isAsyncRenderer);
 }
 
 export async function loadAsyncRenderersByType(