fix: flush value debouncer to handle detach and re-attach

vaadin · Sep 18, 2023 · 20d60f2 · 20d60f2
1 parent db77d93
commit 20d60f2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor.js b/packages/rich-text-editor/src/vaadin-rich-text-editor.js
@@ -536,6 +536,13 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
+
+    // Ensure that htmlValue property set before attach
+    // gets applied in case of detach and re-attach.
+    if (this.__debounceSetValue && this.__debounceSetValue.isActive()) {
+      this.__debounceSetValue.flush();
+    }
+
     this._editor.emitter.removeAllListeners();
     this._editor.emitter.listeners = {};
   }

diff --git a/packages/rich-text-editor/test/basic.test.js b/packages/rich-text-editor/test/basic.test.js
@@ -929,7 +929,7 @@ describe('rich text editor', () => {
     });
   });
 
-  describe('listener clean up', () => {
+  describe('detach and re-attach', () => {
     it('should not have active listeners once detached', () => {
       expect(editor.emitter).to.not.equal(null);
       expect(editor.emitter._events).to.not.be.empty;
@@ -955,5 +955,16 @@ describe('rich text editor', () => {
       expect(rte._editor.emitter._eventsCount).to.greaterThan(0);
       expect(rte._editor.emitter.listeners).to.not.be.empty;
     });
+
+    it('should keep htmlValue when detached and immediately re-attached', () => {
+      rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
+
+      const parent = rte.parentNode;
+      parent.removeChild(rte);
+      parent.appendChild(rte);
+
+      // Quill is converting the italic font to use appropriate tag
+      expect(rte.htmlValue).to.equal('<h1>Foo</h1>');
+    });
   });
 });