Fixed #19851, the rangeSelector button state was not preserved.

highcharts · Dec 5, 2023 · 59f5b17 · 59f5b17
1 parent 796d17a
commit 59f5b17
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/samples/unit-tests/rangeselector/update/demo.js b/samples/unit-tests/rangeselector/update/demo.js
@@ -25,6 +25,7 @@ QUnit.test('RangeSelector update', function (assert) {
 
     assert.ok(chart.rangeSelector, 'chart.rangeSelector should be set');
 
+
     assert.strictEqual(
         chart.spacing[2],
         100,
@@ -59,3 +60,22 @@ QUnit.test('RangeSelector update', function (assert) {
         '#14856: It should not leak chart event listeners on update'
     );
 });
+
+QUnit.test('RangeSelector update hover', function (assert) {
+    var chart = Highcharts.stockChart('container', {
+        series: [{
+            pointInterval: 24 * 36e5,
+            pointStart: Date.UTC(2013, 0, 1),
+            data: Array.from({ length: 100 }, (_, x) => Math.sin(x / 10) * 10)
+        }]
+    });
+    const controller = new TestController(chart);
+    controller.mouseEnter([100, 15], [100, 25], {});
+    chart.redraw();
+
+    assert.strictEqual(
+        chart.rangeSelector.buttons[1].fill,
+        '#e6e6e6',
+        'Color of the button should be correct'
+    );
+});
diff --git a/ts/Stock/RangeSelector/RangeSelector.ts b/ts/Stock/RangeSelector/RangeSelector.ts
@@ -170,6 +170,7 @@ class RangeSelector {
      * */
 
     public buttons: Array<SVGElement> = void 0 as any;
+    public isCollapsed?: boolean;
     public buttonGroup?: SVGElement;
     public buttonOptions: Array<RangeSelectorButtonOptions> =
         RangeSelector.prototype.defaultButtons;
@@ -1826,6 +1827,13 @@ class RangeSelector {
             zoomText
         } = this;
 
+        // If the buttons are already collapsed do nothing.
+        if (this.isCollapsed === true) {
+            return;
+
+        }
+        this.isCollapsed = true;
+
         const userButtonTheme = (
             chart.userOptions.rangeSelector &&
             chart.userOptions.rangeSelector.buttonTheme
@@ -1906,6 +1914,12 @@ class RangeSelector {
 
         this.hideDropdown();
 
+        // If buttons are already not collapsed, do nothing.
+        if (this.isCollapsed === false) {
+            return;
+
+        }
+        this.isCollapsed = false;
         if (zoomText) {
             zoomText.show();
         }