chore(): move canvas click handler to TextManager (#8939)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [next]
+
+- chore(): move canvas click handler to TextManager [#8939](https://github.com/fabricjs/fabric.js/pull/8939)
+
 ## [6.0.0-beta6]
 
 - patch(): expose `Control#shouldActivate` [#8934](https://github.com/fabricjs/fabric.js/pull/8934)

src/canvas/Canvas.ts

@@ -116,7 +116,7 @@ export class Canvas extends SelectableCanvas {
 
   private _isClick: boolean;
 
-  textEditingManager = new TextEditingManager();
+  textEditingManager = new TextEditingManager(this);
 
   constructor(el: string | HTMLCanvasElement, options = {}) {
     super(el, options);
@@ -1593,7 +1593,7 @@ export class Canvas extends SelectableCanvas {
    * @override clear {@link textEditingManager}
    */
   clear() {
-    this.textEditingManager.dispose();
+    this.textEditingManager.clear();
     super.clear();
   }
 
@@ -1602,7 +1602,7 @@ export class Canvas extends SelectableCanvas {
    */
   destroy() {
     this.removeListeners();
-    super.destroy();
     this.textEditingManager.dispose();
+    super.destroy();
   }
 }

src/canvas/TextEditingManager.ts

@@ -1,13 +1,22 @@
 import type { TPointerEvent } from '../EventTypeDefs';
 import type { ITextBehavior } from '../shapes/IText/ITextBehavior';
 import { removeFromArray } from '../util/internals';
+import type { Canvas } from './Canvas';
 
 /**
  * In charge of synchronizing all interactive text instances of a canvas
  */
 export class TextEditingManager {
   private targets: ITextBehavior[] = [];
   private declare target?: ITextBehavior;
+  private __disposer: VoidFunction;
+
+  constructor(canvas: Canvas) {
+    const cb = () => this.target?.hiddenTextarea?.focus();
+    const el = canvas.upperCanvasEl;
+    el.addEventListener('click', cb);
+    this.__disposer = () => el.removeEventListener('click', cb);
+  }
 
   exitTextEditing() {
     this.target = undefined;
@@ -41,8 +50,15 @@ export class TextEditingManager {
     this.target?.isEditing && this.target.updateSelectionOnMouseMove(e);
   }
 
-  dispose() {
+  clear() {
     this.targets = [];
     this.target = undefined;
   }
+
+  dispose() {
+    this.clear();
+    this.__disposer();
+    // @ts-expect-error disposing
+    delete this.__disposer;
+  }
 }

src/shapes/IText/ITextKeyBehavior.ts

@@ -101,18 +101,6 @@ export abstract class ITextKeyBehavior<
       'compositionend',
       this.onCompositionEnd.bind(this)
     );
-
-    if (!this._clickHandlerInitialized && this.canvas) {
-      this.canvas.upperCanvasEl.addEventListener(
-        'click',
-        this.onClick.bind(this)
-      );
-      this._clickHandlerInitialized = true;
-    }
-  }
-
-  onClick() {
-    this.hiddenTextarea && this.hiddenTextarea.focus();
   }
 
   /**

test/unit/canvas_events.js

@@ -1182,7 +1182,7 @@
     assert.ok(manager.target === a, 'should register a');
     canvas.remove(a);
     assert.ok(!manager.target, 'should unregister a');
-    manager.dispose();
+    manager.clear();
     assert.ok(!manager.target, 'should have disposed ref');
     assert.deepEqual(manager.targets, [], 'should have disposed refs');
     const g = new fabric.Group([a]);