Fixes empty text handling with click on control (patch)

Author: Falke-Design

cypress/e2e/text.cy.js

@@ -114,6 +114,31 @@ describe('Text Layer', () => {
       });
     });
 
+    it('place text layer and remove it with click on control', () => {
+      cy.toolbarButton('text')
+        .click()
+        .closest('.button-container')
+        .should('have.class', 'active');
+
+      cy.get(mapSelector).click(90, 250);
+
+      let textArea;
+      cy.window().then(({ map }) => {
+        expect(1).to.eq(map.pm.getGeomanDrawLayers().length);
+        const textLayer = map.pm.getGeomanDrawLayers()[0];
+        textArea = textLayer.pm.getElement();
+        expect(textArea.value).to.eq('');
+      });
+
+      cy.wait(500);
+      cy.get(mapSelector).click(20, 20);
+      cy.wait(500);
+
+      cy.window().then(({ map }) => {
+        expect(0).to.eq(map.pm.getGeomanDrawLayers().length);
+      });
+    });
+
     it('continue drawing', () => {
       cy.window().then(({ map }) => {
         map.pm.setGlobalOptions({ continueDrawing: true });
@@ -152,8 +177,7 @@ describe('Text Layer', () => {
         expect(textMap).to.eq(null);
       });
 
-      cy.get(mapSelector)
-        .trigger('mousemove', 200, 150, { which: 1 });
+      cy.get(mapSelector).trigger('mousemove', 200, 150, { which: 1 });
 
       cy.window().then(({ map }) => {
         const textMap = map.pm.Draw.Text._hintMarker._map;
@@ -228,6 +252,44 @@ describe('Text Layer', () => {
       });
     });
 
+    it('allows to edit the Text multiple times', () => {
+      cy.toolbarButton('text')
+        .click()
+        .closest('.button-container')
+        .should('have.class', 'active');
+
+      cy.get(mapSelector).click(90, 250);
+
+      let textArea;
+      cy.window().then(({ map }) => {
+        expect(1).to.eq(map.pm.getGeomanDrawLayers().length);
+        const textLayer = map.pm.getGeomanDrawLayers()[0];
+        textArea = textLayer.pm.getElement();
+        expect(textArea.style.width).to.eq('16px');
+        cy.get(textArea).type('Hello World');
+      });
+      cy.get(mapSelector).click(100, 100);
+
+      cy.toolbarButton('edit').click();
+
+      cy.get(mapSelector).click(90, 250);
+      cy.window().then(() => {
+        expect(textArea.value).to.eq('Hello World');
+        cy.get(textArea).type(' - Hello Test');
+      });
+      cy.get(mapSelector).click(100, 100);
+      cy.get(mapSelector).click(90, 250);
+      cy.window().then(() => {
+        expect(textArea.value).to.eq('Hello World - Hello Test');
+        cy.get(textArea).type(' - Bye');
+      });
+      cy.get(mapSelector).click(100, 100);
+      cy.get(mapSelector).click(90, 250);
+      cy.window().then(() => {
+        expect(textArea.value).to.eq('Hello World - Hello Test - Bye');
+      });
+    });
+
     describe('Options', () => {
       it('adds predefined `text`', () => {
         cy.window().then(({ map }) => {

src/js/Edit/L.PM.Edit.Text.js

@@ -56,7 +56,9 @@ Edit.Text = Edit.extend({
     L.DomEvent.off(this.textArea, 'input', this._autoResize, this);
     L.DomEvent.off(this.textArea, 'focus', this._focusChange, this);
     L.DomEvent.off(this.textArea, 'blur', this._focusChange, this);
-    L.DomEvent.off(document, 'click', this._documentClick, this);
+    document.removeEventListener('click', this._documentClickThis, {
+      capture: true,
+    });
 
     this._focusChange();
     this.textArea.readOnly = true;
@@ -139,7 +141,11 @@ Edit.Text = Edit.extend({
     // we need this timeout because else the place click event is triggered here too.
     setTimeout(() => {
       if (this.enabled()) {
-        L.DomEvent.on(document, 'click', this._documentClick, this);
+        this._documentClickThis =
+          this._documentClickThis || this._documentClick.bind(this);
+        document.addEventListener('click', this._documentClickThis, {
+          capture: true,
+        });
       }
     }, 100);
   },