Эх сурвалжийг харах

[frontend] - unmount react root on DOM node disposal (#2982)

* [frontend] - unmount react root on DOM node disposal
Bjorn Alm 3 жил өмнө
parent
commit
8dac801691

+ 6 - 1
desktop/core/src/desktop/js/ko/bindings/ko.reactWrapper.js

@@ -36,12 +36,17 @@ ko.bindingHandlers.reactWrapper = (() => {
       const props = getProps(allBindings);
       const props = getProps(allBindings);
 
 
       // The component's react root should only be created once per DOM
       // The component's react root should only be created once per DOM
-      // load so we pass it along via the bindingContext to be reused in the
+      // load so we pass it along via the bindingContext to be reused in the KO update call.
       const reactRoot = createRoot(el);
       const reactRoot = createRoot(el);
       el.__KO_React_root = reactRoot;
       el.__KO_React_root = reactRoot;
       loadComponent(componentName).then(Component => {
       loadComponent(componentName).then(Component => {
         reactRoot.render(createElement(Component, props));
         reactRoot.render(createElement(Component, props));
       });
       });
+
+      // Since the react component is a root component we need to handle the
+      // unmounting explicitly if the dom node is disposed by Knockout, e.g. via "ko if:"
+      ko.utils.domNodeDisposal.addDisposeCallback(el, () => reactRoot.unmount());
+
       // Tell Knockout that it does not need to update the children
       // Tell Knockout that it does not need to update the children
       // of this component, since that is now handled by React
       // of this component, since that is now handled by React
       return { controlsDescendantBindings: true };
       return { controlsDescendantBindings: true };