TextEditor: 'outside' label should be aligned when before buttons used and input should be focused after label click

packages/devextreme/js/ui/date_range_box/ui.multiselect_date_box.js

@@ -4,6 +4,7 @@ import RangeCalendarStrategy from './strategy/rangeCalendar';
 import { addNamespace } from '../../events/utils';
 import eventsEngine from '../../events/core/events_engine';
 import { getDeserializedDate, monthDifference } from './ui.date_range.utils';
+import { getWidth } from '../../core/utils/size';
 
 const START_DATEBOX_CLASS = 'dx-start-datebox';
 class MultiselectDateBox extends DateBox {
@@ -185,6 +186,18 @@ class MultiselectDateBox extends DateBox {
         return super._isTargetOutOfComponent(target) && isTargetOutOfDateRangeBox;
     }
 
+    _updateLabelWidth() {
+        const $beforeButtonsContainer = this._strategy.dateRangeBox._$beforeButtonsContainer;
+        const { labelMode } = this.option();
+
+        if(labelMode === 'outside' && $beforeButtonsContainer && this._isStartDateBox()) {
+            this._label._updateLabelTransform(getWidth($beforeButtonsContainer));
+            return;
+        }
+
+        super._updateLabelWidth();
+    }
+
     _optionChanged(args) {
         switch(args.name) {
             case 'isValid': {

packages/devextreme/js/ui/text_box/ui.text_editor.base.js

@@ -509,13 +509,19 @@ const TextEditorBase = Editor.inherit({
 
         this._labelContainerElement = $(this._getLabelContainer()).get(0);
 
-        const { label, labelMode, labelMark } = this.option();
+        const { label, labelMode, labelMark, rtlEnabled } = this.option();
 
         const labelConfig = {
+            onClickHandler: () => {
+                this.focus();
+            },
+            onHoverHandler: (e) => { e.stopPropagation(); },
+            onActiveHandler: (e) => { e.stopPropagation(); },
             $editor: this.$element(),
             text: label,
             mark: labelMark,
             mode: labelMode,
+            rtlEnabled,
             containsButtonsBefore: !!this._$beforeButtonsContainer,
             containerWidth: this._getLabelContainerWidth(),
             beforeWidth: this._getLabelBeforeWidth()

packages/devextreme/js/ui/text_box/ui.text_editor.label.js

@@ -1,5 +1,12 @@
 import $ from '../../core/renderer';
 import Guid from '../../core/guid';
+import { name as click } from '../../events/click';
+import eventsEngine from '../../events/core/events_engine';
+import { addNamespace } from '../../events/utils/index';
+import { start as hoverStart } from '../../events/hover';
+import { active } from '../../events/core/emitter.feedback';
+import { getWindow } from '../../core/utils/window';
+import { getWidth } from '../../core/utils/size';
 
 const TEXTEDITOR_LABEL_CLASS = 'dx-texteditor-label';
 const TEXTEDITOR_WITH_LABEL_CLASS = 'dx-texteditor-with-label';
@@ -12,20 +19,9 @@ const LABEL_CLASS = 'dx-label';
 const LABEL_AFTER_CLASS = 'dx-label-after';
 
 class TextEditorLabel {
-    constructor({
-        $editor,
-        text, mode, mark,
-        containsButtonsBefore,
-        containerWidth,
-        beforeWidth
-    }) {
-        this._props = {
-            $editor,
-            text, mode, mark,
-            containsButtonsBefore,
-            containerWidth,
-            beforeWidth
-        };
+    constructor(props) {
+        this.NAME = 'dxLabel';
+        this._props = props;
 
         this._id = `${TEXTEDITOR_LABEL_CLASS}-${new Guid()}`;
 
@@ -69,6 +65,34 @@ class TextEditorLabel {
         visible
             ? this._$root.appendTo(this._props.$editor)
             : this._$root.detach();
+
+        this._attachEvents();
+    }
+
+    _attachEvents() {
+        const clickEventName = addNamespace(click, this.NAME);
+        const hoverStartEventName = addNamespace(hoverStart, this.NAME);
+        const activeEventName = addNamespace(active, this.NAME);
+
+        eventsEngine.off(this._$labelSpan, clickEventName);
+        eventsEngine.off(this._$labelSpan, hoverStartEventName);
+
+        if(this._isVisible() && this._isOutsideMode()) {
+            eventsEngine.on(this._$labelSpan, clickEventName, (e) => {
+                const selectedText = getWindow().getSelection().toString();
+
+                if(selectedText === '') {
+                    this._props.onClickHandler();
+                    e.preventDefault();
+                }
+            });
+            eventsEngine.on(this._$labelSpan, hoverStartEventName, (e) => {
+                this._props.onHoverHandler(e);
+            });
+            eventsEngine.on(this._$labelSpan, activeEventName, (e) => {
+                this._props.onActiveHandler(e);
+            });
+        }
     }
 
     _updateEditorLabelClass(visible) {
@@ -84,12 +108,16 @@ class TextEditorLabel {
 
             this._props.$editor.addClass(labelClass);
 
-            if(this._props.mode === 'outside') {
+            if(this._isOutsideMode()) {
                 this._props.$editor.addClass(TEXTEDITOR_LABEL_OUTSIDE_CLASS);
             }
         }
     }
 
+    _isOutsideMode() {
+        return this._props.mode === 'outside';
+    }
+
     _updateEditorBeforeButtonsClass(visible = this._isVisible()) {
         this._props.$editor
             .removeClass(TEXTEDITOR_WITH_BEFORE_BUTTONS_CLASS);
@@ -111,13 +139,24 @@ class TextEditorLabel {
 
     _updateBeforeWidth() {
         this._$before.css({ width: this._props.beforeWidth });
+
+        this._updateLabelTransform();
+    }
+
+    _updateLabelTransform(offset = 0) {
+        this._$labelSpan.css('transform', '');
+
+        if(this._isVisible() && this._isOutsideMode()) {
+            const sign = this._props.rtlEnabled ? 1 : -1;
+
+            this._$labelSpan.css('transform', 'translateX(' + sign * (getWidth(this._$before) + offset) + 'px)');
+        }
     }
 
     _updateMaxWidth() {
         this._$label.css({ maxWidth: this._props.containerWidth });
     }
 
-
     $element() {
         return this._$root;
     }
@@ -133,6 +172,7 @@ class TextEditorLabel {
     updateMode(mode) {
         this._props.mode = mode;
         this._toggleMarkupVisibility();
+        this._updateLabelTransform();
     }
 
     updateText(text) {

packages/devextreme/scss/widgets/base/colorBox/_mixins.scss

@@ -1,12 +0,0 @@
-@use "../icons" as *;
-
-@mixin colorbox-label-outside-mixin() {
-  &.dx-texteditor-label-outside {
-    &.dx-editor-filled,
-    &.dx-editor-underlined {
-      .dx-label-before {
-        min-width: 0;
-      }
-    }
-  }
-}

packages/devextreme/scss/widgets/base/textEditor/_mixins.scss

@@ -156,7 +156,6 @@
   $label-margin-top-diff,
   $texteditor-label-outside-font-size,
   $texteditor-label-outside-height,
-  $colorbox-label-outside-before-width,
 ) {
   .dx-editor-outlined {
     .dx-texteditor-label {
@@ -291,109 +290,37 @@
     &.dx-texteditor-label-outside {
       margin-top: $label-offset-y-outside;
 
-      .dx-label-before {
+      .dx-texteditor-label {
+        user-select: auto;
+      }
+
+      .dx-label-before,
+      .dx-label-after {
         clip-path: none;
       }
 
       .dx-label {
+        margin: 0;
+        clip-path: none;
         border-top-width: $label-border-width;
         border-radius: 0;
         border-start-end-radius: 1px;
         border-end-end-radius: 1px;
         margin-inline-start: 0;
         padding: 0;
-        clip-path: inset(-#{math.div($label-offset-y-outside, $texteditor-label-outside-font-size)}em 1px -1px (-$label-before-min-width));
 
         span {
+          position: absolute;
+          width: 100%;
+          cursor: default;
+          pointer-events: auto;
           font-size: $texteditor-label-outside-font-size;
           margin-top: 0;
-          transform: translate(-$label-before-min-width, -#{math.div($label-offset-y-outside + $label-border-width, $texteditor-label-outside-font-size)}em);
+          top: -$label-offset-y-outside;
           height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
           line-height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
         }
       }
-
-      &.dx-rtl {
-        .dx-label {
-          clip-path: inset(-#{math.div($label-offset-y-outside, $texteditor-label-outside-font-size)}em (-$label-before-min-width) -1px 1px);
-
-          span {
-            transform: translate($label-before-min-width, -#{math.div($label-offset-y-outside + $label-border-width, $texteditor-label-outside-font-size)}em);
-          }
-        }
-      }
-
-      &.dx-state-focused {
-        @include dx-state-border-color($texteditor-focused-border-color, $texteditor-focused-border-bottom-color);
-
-        .dx-label {
-          border-top-width: $label-active-border-width;
-
-          span {
-            transform: translate(-$label-before-min-width, -#{math.div($label-offset-y-outside + $label-active-border-width, $texteditor-label-outside-font-size)}em);
-          }
-        }
-
-        &.dx-rtl {
-          .dx-label {
-            span {
-              transform: translate($label-before-min-width, -#{math.div($label-offset-y-outside + $label-active-border-width, $texteditor-label-outside-font-size)}em);
-            }
-          }
-        }
-      }
-
-      &.dx-daterangebox {
-        .dx-label {
-          span {
-            transform: translate(-$label-before-min-width, -#{math.div($label-offset-y-outside + $label-border-width, $texteditor-label-outside-font-size)}em);
-          }
-        }
-
-        &.dx-rtl {
-          .dx-label {
-            span {
-              transform: translate($label-before-min-width, -#{math.div($label-offset-y-outside + $label-border-width, $texteditor-label-outside-font-size)}em);
-            }
-          }
-        }
-      }
-
-      &.dx-colorbox {
-        .dx-label {
-          clip-path: inset(-#{math.div($label-offset-y-outside, $texteditor-label-outside-font-size)}em 1px -1px (-$colorbox-label-outside-before-width));
-
-          span {
-            transform: translate(-$colorbox-label-outside-before-width, -#{math.div($label-offset-y-outside + $label-border-width, $texteditor-label-outside-font-size)}em);
-          }
-        }
-
-        &.dx-rtl {
-          .dx-label {
-            clip-path: inset(-#{math.div($label-offset-y-outside, $texteditor-label-outside-font-size)}em (-$colorbox-label-outside-before-width) -1px 1px);
-
-            span {
-              transform: translate($colorbox-label-outside-before-width, -#{math.div($label-offset-y-outside + $label-border-width, $texteditor-label-outside-font-size)}em);
-            }
-          }
-        }
-
-        &.dx-state-focused {
-          .dx-label {
-            span {
-              transform: translate(-$colorbox-label-outside-before-width, -#{math.div($label-offset-y-outside + $label-active-border-width, $texteditor-label-outside-font-size)}em);
-            }
-          }
-
-          &.dx-rtl {
-            .dx-label {
-              span {
-                transform: translate($colorbox-label-outside-before-width, -#{math.div($label-offset-y-outside + $label-active-border-width, $texteditor-label-outside-font-size)}em);
-              }
-            }
-          }
-        }
-      }
     }
 
     &.dx-texteditor-with-floating-label {
@@ -506,16 +433,24 @@
     &.dx-texteditor-label-outside {
       margin-top: $texteditor-label-outside-top-offset;
 
-      .dx-label-before {
-        min-width: 0;
-      }
-
       .dx-texteditor-label {
+        user-select: auto;
         font-size: $texteditor-label-outside-font-size;
         height: $texteditor-label-outside-height;
         line-height: $texteditor-label-outside-height;
-        top: -$texteditor-label-outside-top-offset;
         margin-top: 0;
+        top: -$texteditor-label-outside-top-offset;
+      }
+
+      .dx-label {
+        cursor: default;
+
+        span {
+          width: 100%;
+          pointer-events: auto;
+          position: absolute;
+          margin-bottom: 0;
+        }
       }
     }
 
@@ -614,17 +549,25 @@
     &.dx-texteditor-label-outside {
       margin-top: $texteditor-label-outside-top-offset;
 
-      .dx-label-before {
-        min-width: 0;
-      }
-
       .dx-texteditor-label {
+        user-select: auto;
         font-size: $texteditor-label-outside-font-size;
         height: $texteditor-label-outside-height;
         line-height: $texteditor-label-outside-height;
         top: -$texteditor-label-outside-top-offset;
         margin-top: 0;
       }
+
+      .dx-label {
+        cursor: default;
+
+        span {
+          width: 100%;
+          pointer-events: auto;
+          position: absolute;
+          margin-bottom: 0;
+        }
+      }
     }
 
     &.dx-texteditor-with-floating-label {

packages/devextreme/scss/widgets/fluent/colorBox/_index.scss

@@ -40,8 +40,6 @@
       }
     }
   }
-
-  @include colorbox-label-outside-mixin();
 }
 
 .dx-colorbox-color-result-preview {