CanvasTable cell editors create React roots that are never unmounted

[Aias00]

Chat2DB Edition

Chat2DB Community

Chat2DB Version

5.3.0

Deployment

Web

Operating System

macOS

Operating System Version

12

Database and Version

No response

Problem Summary

In InputIEditor, createElement calls ReactDOM.createRoot(inputContainer).render(...) inline and discards the root reference. onEnd only detaches the DOM node (removeChild) — the React fiber tree, state, effects, and event handlers inside the rendered component are never torn down. This leaks on every cell-edit open/close cycle in the canvas table (a frequent action). The same pattern exists for the date editor at :388.

Steps to Reproduce

1. Open a result-set table in the canvas editor.
2. Open and close cell editors repeatedly.
3. Observe accumulated unmounted React roots / leaked handlers and state per edit cycle.

Expected Behavior

Store the root on the instance and call root.unmount() in onEnd (and before re-rendering if createElement can be called twice for the same instance).

Actual Behavior

blocks/CanvasTable/editor/InputIEditor/index.tsx:202 (InputEditor) and :388 (DateInputEditor):

ReactDOM.createRoot(inputContainer).render(
  <InputReact textarea={this.textarea} defaultValue={value} ref={this.inputRef} />,
);

onEnd (line 241-243):

onEnd() {
  if (this.inputContainer && this.container?.contains(this.inputContainer)) {
    this.container.removeChild(this.inputContainer);
  }
  this.inputContainer = null;

No unmount() is ever called.

Logs

Screenshots or Additional Context

Fix: this.root = ReactDOM.createRoot(inputContainer) in createElement, then this.root?.unmount() in onEnd (mirroring the React createRoot imperative guidance).

Impact

Limited or cosmetic impact

Workaround

N/A

Submission Checklist

• I reproduced this on the selected Chat2DB edition.
• I searched existing issues for duplicates.
• I removed credentials and private data.

[github-actions]

Thanks for the focused report. I understand that both InputEditor and DateInputEditor create React roots whose references are discarded, while onEnd removes only the DOM container, allowing React-managed state, effects, and handlers to remain after repeated cell-edit cycles.

The report includes the affected locations, reproduction steps, expected cleanup, and a proposed direction. The next maintainer step is to review both editor lifecycles and confirm that storing each root and calling unmount() during teardown also handles any repeated createElement call on the same instance.

``

Generated by AI Issue Assistant for #2070 · 7.84 AIC · ⌖ 2.69 AIC · ⊞ 16.4K · ◷