fix width of tooltip when value is formatted in the Slider (#3031)

DevExpress · Feb 20, 2018 · ce847e8 · ce847e8
1 parent 1032ae0
commit ce847e8
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/js/ui/slider/ui.slider_handle.js b/js/ui/slider/ui.slider_handle.js
@@ -180,14 +180,17 @@ var SliderHandle = Widget.inherit({
         translator.move(this._$tooltipArrow, { left: mathUtils.fitIntoRange(arrowLeft, arrowMinLeft, arrowMaxRight) });
     },
 
+    _getFormattedValue: function(value) {
+        return numberLocalization.format(value, this.option("tooltipFormat"));
+    },
+
     _renderValue: function() {
         if(!this._tooltip) {
             return;
         }
 
-        var formattedValue = numberLocalization.format(this.option("value"), this.option("tooltipFormat"));
-
-        this._tooltip.$content().html(formattedValue);
+        var value = this.option("value");
+        this._tooltip.$content().html(this._getFormattedValue(value));
         this._fitTooltip();
     },
 
@@ -223,7 +226,9 @@ var SliderHandle = Widget.inherit({
             case "value":
                 this._renderValue();
 
-                this._ensureTooltipIsCentered(args.value, args.previousValue);
+                var value = this._getFormattedValue(args.value);
+                var previousValue = this._getFormattedValue(args.previousValue);
+                this._ensureTooltipIsCentered(value, previousValue);
 
                 this.setAria("valuenow", args.value);
                 break;

diff --git a/testing/tests/DevExpress.ui.widgets.editors/slider.tests.js b/testing/tests/DevExpress.ui.widgets.editors/slider.tests.js
@@ -39,6 +39,8 @@ var SLIDER_CLASS = "dx-slider",
     FEEDBACK_HIDE_TIMEOUT = 400,
     SLIDER_HANDLE_WIDTH = 14,
 
+    POPUP_CONTENT_CLASS = "dx-popup-content",
+
     TOOLTIP_CLASS = "dx-tooltip",
     TOOLTIP_CONTENT_CLASS = "dx-overlay-content";
 
@@ -869,6 +871,27 @@ QUnit.test("'tooltip.format' as undefined (null, false) should render value as i
     assert.equal($.trim($tooltip.text()), "1");
 });
 
+QUnit.test("Update tooltip width when value is formatted", function(assert) {
+    var values = ["first", "second value", "third"],
+        $slider = $("#slider").dxSlider({
+            min: 0,
+            value: 1,
+            max: 3,
+            tooltip: {
+                enabled: true,
+                showMode: "always",
+                format: function(index) {
+                    return values[index - 1];
+                }
+            },
+            useInkRipple: false
+        }),
+        $handle = $slider.find("." + SLIDER_HANDLE_CLASS),
+        $tooltip = $handle.find("." + TOOLTIP_CLASS);
+
+    $slider.dxSlider("option", "value", 2);
+    assert.ok($tooltip.find("." + TOOLTIP_CONTENT_CLASS).width() >= $tooltip.find("." + POPUP_CONTENT_CLASS).width());
+});
 
 QUnit.module("labels", moduleOptions);