FIX update react render (#1322)

silverstripe · Jan 29, 2023 · 0dfc61e · 0dfc61e
1 parent ac3415c
commit 0dfc61e
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 12 deletions.
diff --git a/client/dist/js/TinyMCE_ssembed.js b/client/dist/js/TinyMCE_ssembed.js
diff --git a/client/dist/js/TinyMCE_sslink-file.js b/client/dist/js/TinyMCE_sslink-file.js
diff --git a/client/dist/js/TinyMCE_ssmedia.js b/client/dist/js/TinyMCE_ssmedia.js
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/entwine/TinyMCE_ssembed.js b/client/src/entwine/TinyMCE_ssembed.js
@@ -1,7 +1,6 @@
 /* global tinymce, window */
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 import ShortcodeSerialiser, { sanitiseShortCodeProperties } from 'lib/ShortcodeSerialiser';

diff --git a/client/src/entwine/TinyMCE_ssmedia.js b/client/src/entwine/TinyMCE_ssmedia.js
@@ -7,7 +7,6 @@
 import jQuery from 'jquery';
 import i18n from 'i18n';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import Injector, { loadComponent } from 'lib/Injector';
 import InsertMediaModal from 'containers/InsertMediaModal/InsertMediaModal';

diff --git a/client/src/entwine/UploadField/UploadFieldEntwine.js b/client/src/entwine/UploadField/UploadFieldEntwine.js
@@ -1,7 +1,6 @@
 /* global window */
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { schemaMerge } from 'lib/schemaFieldValues';
 import { loadComponent } from 'lib/Injector';
@@ -31,7 +30,11 @@ jQuery.entwine('ss', ($) => {
     onunmatch() {
       this._super();
       // solves errors given by ReactDOM "no matched root found" error.
-      ReactDOM.unmountComponentAtNode(this.siblings('.uploadfield-holder')[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     },
 
     onmatch() {
@@ -66,13 +69,17 @@ jQuery.entwine('ss', ($) => {
       const UploadField = this.getComponent();
 
       // TODO: rework entwine so that react has control of holder
-      ReactDOM.render(
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this.getContainer());
+        this.setReactRoot(root);
+      }
+      root.render(
         <UploadField
           {...props}
           onChange={onChange}
           noHolder
-        />,
-        this.getContainer()
+        />
       );
     },