fix: prevent from creating multi portals again (#294)

* Revert "Revert "fix: prevent from creating multi portals (#292)" (#293)"

This reverts commit fd694b6.

* chore: patch

Author: zombieJ

src/index.tsx

@@ -156,6 +156,9 @@ export function generateTrigger(
 
     triggerRef = React.createRef<React.ReactInstance>();
 
+    // ensure `getContainer` will be called only once
+    portalContainer?: HTMLElement;
+
     attachId?: number;
 
     clickOutsideHandler: CommonEventHandler;
@@ -587,18 +590,28 @@ export function generateTrigger(
     };
 
     getContainer = () => {
-      const { getDocument } = this.props;
-      const popupContainer = getDocument(this.getRootDomNode()).createElement(
-        'div',
-      );
-      // Make sure default popup container will never cause scrollbar appearing
-      // https://github.com/react-component/trigger/issues/41
-      popupContainer.style.position = 'absolute';
-      popupContainer.style.top = '0';
-      popupContainer.style.left = '0';
-      popupContainer.style.width = '100%';
-      this.attachParent(popupContainer);
-      return popupContainer;
+      if (!this.portalContainer) {
+        // In React.StrictMode component will call render multiple time in first mount.
+        // When you want to refactor with FC, useRef will also init multiple time and
+        // point to different useRef instance which will create multiple element
+        // (This multiple render will not trigger effect so you can not clean up this
+        // in effect). But this is safe with class component since it always point to same class instance.
+        const { getDocument } = this.props;
+        const popupContainer = getDocument(this.getRootDomNode()).createElement(
+          'div',
+        );
+        // Make sure default popup container will never cause scrollbar appearing
+        // https://github.com/react-component/trigger/issues/41
+        popupContainer.style.position = 'absolute';
+        popupContainer.style.top = '0';
+        popupContainer.style.left = '0';
+        popupContainer.style.width = '100%';
+        this.attachParent(popupContainer);
+
+        this.portalContainer = popupContainer;
+      }
+
+      return this.portalContainer;
     };
 
     /**