pass onHover and onActive handlers as props

DevExpress · Nov 7, 2023 · 7dca140 · 7dca140
1 parent c33beff
commit 7dca140
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/packages/devextreme/js/ui/text_box/ui.text_editor.base.js b/packages/devextreme/js/ui/text_box/ui.text_editor.base.js
@@ -515,6 +515,8 @@ const TextEditorBase = Editor.inherit({
             onClickHandler: () => {
                 this.focus();
             },
+            onHoverHandler: (e) => { e.stopPropagation(); },
+            onActiveHandler: (e) => { e.stopPropagation(); },
             $editor: this.$element(),
             text: label,
             mark: labelMark,

diff --git a/packages/devextreme/js/ui/text_box/ui.text_editor.label.js b/packages/devextreme/js/ui/text_box/ui.text_editor.label.js
@@ -87,10 +87,10 @@ class TextEditorLabel {
                 }
             });
             eventsEngine.on(this._$labelSpan, hoverStartEventName, (e) => {
-                e.stopPropagation();
+                this._props.onHoverHandler();
             });
             eventsEngine.on(this._$labelSpan, activeEventName, (e) => {
-                e.stopPropagation();
+                this._props.onActiveHandler();
             });
         }
     }

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textEditorLabel.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textEditorLabel.tests.js
@@ -97,19 +97,34 @@ QUnit.module('textEditorLabel', {
 
     QUnit.module('Outside labelMode', () => {
         ['init', 'runtime'].forEach((scenario) => {
-            QUnit.test(`onClickHandler should be called on label click when mode is set to "outside" on ${scenario}`, function(assert) {
-                const setOnInit = scenario === 'init';
-                this.reinit({
-                    onClickHandler: this.spy,
-                    mode: setOnInit ? 'outside' : 'static',
-                });
-
-                if(!setOnInit) {
-                    this.label.updateMode('outside');
+            [
+                {
+                    eventName: 'dxclick',
+                    handlerName: 'onClickHandler',
+                },
+                {
+                    eventName: 'dxhoverstart',
+                    handlerName: 'onHoverHandler',
+                },
+                {
+                    eventName: 'dxactive',
+                    handlerName: 'onActiveHandler',
                 }
-                $(this.getSpan()).trigger('dxclick');
-
-                assert.strictEqual(this.spy.callCount, 1, 'onClick handler was called on label click');
+            ].forEach(({ eventName, handlerName }) => {
+                QUnit.test(`${handlerName} should be called on label ${eventName} when mode is set to "outside" on ${scenario}`, function(assert) {
+                    const setOnInit = scenario === 'init';
+                    this.reinit({
+                        [handlerName]: this.spy,
+                        mode: setOnInit ? 'outside' : 'static',
+                    });
+
+                    if(!setOnInit) {
+                        this.label.updateMode('outside');
+                    }
+                    $(this.getSpan()).trigger(eventName);
+
+                    assert.strictEqual(this.spy.callCount, 1, `${handlerName} was called`);
+                });
             });
 
             QUnit.test(`onClickHandler should not be called on label with empty text click when mode is set to "outside" on ${scenario}`, function(assert) {