HtmlEditor: click on variable toolbar format button before popup is hidden after variable select should not add a undefined variable (T1278577)

Author: Zedwag

packages/devextreme/js/__internal/ui/html_editor/modules/m_popup.ts

@@ -113,7 +113,7 @@ if (Quill) {
     }
 
     selectionChangedHandler(e) {
-      if (this._popup.option('visible')) {
+      if (this._popup.option('visible') && e.addedItems.length) {
         this._popup.hide();
 
         this.insertEmbedContent(e);

packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarIntegration.tests.js

@@ -20,6 +20,7 @@ const INPUT_CLASS = 'dx-texteditor-input';
 const DIALOG_CLASS = 'dx-formdialog';
 const DIALOG_FORM_CLASS = 'dx-formdialog-form';
 const BUTTON_CLASS = 'dx-button';
+const SUGGESTION_LIST_CLASS = 'dx-suggestion-list';
 const LIST_ITEM_CLASS = 'dx-list-item';
 
 const BLACK_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYGWNgYmL6DwABFgEGpP/tHAAAAABJRU5ErkJggg==';
@@ -1000,5 +1001,34 @@ export default function() {
             $('.dx-suggestion-list .dx-list-item').trigger('dxclick');
             this.clock.tick(10);
         });
+
+        test('Click on variable toolbar format button before popup is hidden after variable select should not add a undefined variable (T1278577)', function(assert) {
+            fx.off = false;
+            const expectedValue = '<p><span class="dx-variable" data-var-start-esc-char="%" data-var-end-esc-char="%" data-var-value="test"><span contenteditable="false">%test%</span></span></p>';
+
+            const editor = $('#htmlEditor').dxHtmlEditor({
+                toolbar: { items: ['variable'] },
+                variables: {
+                    dataSource: ['test'],
+                    escapeChar: '%'
+                },
+            }).dxHtmlEditor('instance');
+
+            $('#htmlEditor')
+                .find(`.${TOOLBAR_FORMAT_WIDGET_CLASS}`)
+                .trigger('dxclick');
+
+            $(`.${SUGGESTION_LIST_CLASS} .${LIST_ITEM_CLASS}`).trigger('dxclick');
+
+            $('#htmlEditor')
+                .find(`.${TOOLBAR_FORMAT_WIDGET_CLASS}`)
+                .trigger('dxclick');
+
+            this.clock.tick(10);
+
+            const value = editor.option('value');
+
+            assert.strictEqual(prepareEmbedValue(value), expectedValue);
+        });
     });
 }