fix(flow-react): avoid Flow-React portal outlet removal conflicts

Some routing cases in hybrid Flow layout + React view applications could produce DOM tree conflicts from Flow server-side changes and React client-side portal removal happening simultaneously. This could throw DOM `NotFoundError` in the browser. This change introduces a dedicated DOM element for React portal outlet, which allows to avoid the error. Fixes vaadin/hilla#3002
vaadin · Dec 20, 2024 · 69b3861 · 69b3861
1 parent d789970
commit 69b3861
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/flow-react/src/main/resources/com/vaadin/flow/server/frontend/ReactAdapter.template b/flow-react/src/main/resources/com/vaadin/flow/server/frontend/ReactAdapter.template
@@ -139,6 +139,12 @@ export abstract class ReactAdapterElement extends HTMLElement {
 
     #unmountComplete = Promise.resolve();
 
+    // NOTE: Separate element used as a portal outlet in React. Allows to avoid
+    // removal conflicts when Flow and React clear or remove it simultaneously,
+    // e. g., when navigating away from  the `ReactRouterOutlet`. See also:
+    // https://github.com/vaadin/hilla/issues/3002
+    #portalOutlet: HTMLElement | null = null;
+
     constructor() {
         super();
         this.#renderHooks = {
@@ -151,9 +157,14 @@ export abstract class ReactAdapterElement extends HTMLElement {
     }
 
     public async connectedCallback() {
+        if (this.#portalOutlet === null) {
+            this.#portalOutlet = document.createElement('flow-portal-outlet');
+            this.#portalOutlet.style.display = 'contents';
+            this.appendChild(this.#portalOutlet);
+        }
         await this.#unmountComplete;
         this.#rendering = createElement(this.#Wrapper);
-        const createNewRoot = this.dispatchEvent(new CustomEvent('flow-portal-add', {
+        const createNewRoot = this.#portalOutlet!.dispatchEvent(new CustomEvent('flow-portal-add', {
             bubbles: true,
             cancelable: true,
             composed: true,
@@ -167,7 +178,7 @@ export abstract class ReactAdapterElement extends HTMLElement {
             return;
         }
 
-        this.#root = createRoot(this);
+        this.#root = createRoot(this.#portalOutlet!);
         this.#maybeRenderRoot();
         this.#root.render(this.#rendering);
     }
@@ -187,7 +198,7 @@ export abstract class ReactAdapterElement extends HTMLElement {
     }
 
     public async disconnectedCallback() {
-        this.dispatchEvent(new CustomEvent('flow-portal-remove', {
+        this.#portalOutlet!.dispatchEvent(new CustomEvent('flow-portal-remove', {
             bubbles: true,
             cancelable: true,
             composed: true,