ui: fix problem page react unmount

packages/ui-default/components/autocomplete/index.tsx

@@ -24,6 +24,7 @@ export default class AutoComplete extends DOMAttachedObject {
   ref = null;
   container = document.createElement('div');
   options: AutoCompleteOptions;
+  component = ReactDOM.createRoot(this.container);
   changeListener = [
     (val) => this.$dom.val(val),
   ];
@@ -64,7 +65,7 @@ export default class AutoComplete extends DOMAttachedObject {
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.createRoot(this.container).render(
+    this.component.render(
       <AutoCompleteFC
         ref={(ref) => { this.ref = ref; }}
         height="34px"
@@ -97,7 +98,7 @@ export default class AutoComplete extends DOMAttachedObject {
   detach() {
     if (this.detached) return;
     super.detach();
-    ReactDOM.unmountComponentAtNode(this.container);
+    this.component.unmount();
     this.$dom.removeClass('autocomplete-dummy');
     this.container.parentNode.removeChild(this.container);
   }

packages/ui-default/components/react/DomComponent.tsx

@@ -2,15 +2,10 @@ import $ from 'jquery';
 import { omit } from 'lodash';
 import React from 'react';
 
-const tempDoms = {};
-
-export default function DomComponent(props: React.HTMLAttributes<HTMLDivElement> & { id?: string, childDom: HTMLElement }) {
+export default function DomComponent(props: React.HTMLAttributes<HTMLDivElement> & { childDom: HTMLElement }) {
   const ref = React.useRef<HTMLDivElement>();
   React.useEffect(() => {
-    let dom = props.childDom;
-    if (props.id && dom) tempDoms[props.id] = dom;
-    else if (props.id && !dom && tempDoms[props.id]) dom = tempDoms[props.id];
-    ref.current.appendChild(dom);
+    ref.current.appendChild(props.childDom);
     return () => {
       $(ref.current).empty();
     };

packages/ui-default/components/scratchpad/index.jsx

@@ -35,7 +35,7 @@ function buildNestedPane([a, ...panes], mode = 'horizontal') {
 const pages = {
   problem: {
     icon: () => <ProblemIcon />,
-    component: () => <Dom childDom={$('.problem-content').get(0)} id="problem-content" />,
+    component: () => <Dom childDom={$('.problem-content').get(0)} />,
   },
 };
 

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.39.13",
+  "version": "4.39.14",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",