@integry/sdk 4.5.22 → 4.5.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.22",
+  "version": "4.5.23",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

package/src/components/MultipurposeField/TagMenu/index.ts

@@ -8,7 +8,7 @@ import { isScrolledIntoView } from '@/utils/common';
 import { searchJSON } from '@/utils/searchJson';
 import { Input } from '@/components/Input';
 import { createElement } from 'preact/compat';
-import { cloneElement } from 'preact/compat';
+import { createPortal } from 'preact/compat';
 import { TagOptions } from '../TagOptions';
 import { ThreeDotLoader } from '../../ThreeDotLoader';
 import styles from './styles.module.scss';
@@ -214,19 +214,24 @@ const FieldDropdown = (props: FieldMenuProps) => {
   }
 
   let tagsComponentRender: any = null;
-  let tagsComponentRenderClone: any = null;
   if (tagsComponent) {
     tagsComponentRender = createElement(tagsComponent, {
       onSelect: () => alert('Selected!'),
     });
-
-    tagsComponentRenderClone = cloneElement(tagsComponentRender);
-    // eslint-disable-next-line no-console
-    console.log(tagsComponentRender);
-    // eslint-disable-next-line no-console
-    console.log(tagsComponentRenderClone);
   }
 
+  const PortalWrapper = () => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (containerRef.current) {
+        createPortal(tagsComponentRender, containerRef.current);
+      }
+    }, []);
+
+    return html`<div ref=${containerRef}></div>`;
+  };
+
   return html` <div
     class=${`${styles.tagMenu} ${enableSearch ? styles.tagMenuWithSearch : ''}`}
     style=${parentContainer && tagMenyStyleRef?.current
@@ -352,7 +357,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
           </div>`
         : html` <div className="${styles.mappedFieldMenu}">
             ${tagsComponent
-              ? html`<div>${tagsComponentRenderClone}</div>`
+              ? html`<${PortalWrapper} />`
               : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,
                 ).length > 0