Fix initial active color for modebar toggle buttons

draftlogs/8130_fix.md

@@ -0,0 +1 @@
+ - Fix initial active color for modebar toggle buttons [[#8130](https://github.com/plotly/plotly.js/pull/8130)]

src/components/modebar/modebar.js

@@ -274,11 +274,14 @@ proto.updateActiveButton = function(buttonClicked) {
         // Use 'data-toggle' and 'buttonClicked' to toggle buttons
         // that have no one-to-one equivalent in fullLayout
         if(isToggleButton) {
-            if(dataAttr === dataAttrClicked) {
-                var isActive = !button3.classed('active');
+            var isActive = button3.classed('active');
+
+            if(buttonClicked !== undefined && dataAttr === dataAttrClicked) {
+                isActive = !isActive;
                 button3.classed('active', isActive);
-                updateButtonStyle(button, isActive);
             }
+
+            updateButtonStyle(button, isActive);
         } else {
             var val = (dataAttr === null) ?
                 dataAttr :

test/jasmine/tests/modebar_test.js

@@ -1619,6 +1619,37 @@ describe('ModeBar', function() {
             .then(done, done.fail);
         });
 
+        it('applies active color to toggle buttons on initial render', function(done) {
+            Plotly.newPlot(gd, [{
+                type: 'scatterternary',
+                a: [1],
+                b: [2],
+                c: [3]
+            }], {
+                modebar: {
+                    color: colors[0],
+                    activecolor: colors[1]
+                }
+            }, {
+                modeBarButtonsToAdd: ['toggleHover']
+            })
+            .then(function() {
+                button = selectButton(gd._fullLayout._modeBar, 'toggleHover');
+
+                expect(button.node.classList.contains('active')).toBe(true);
+                checkButtonColor(button, colors[1]);
+
+                button.click();
+                expect(button.node.classList.contains('active')).toBe(false);
+                checkButtonColor(button, colors[0]);
+
+                button.click();
+                expect(button.node.classList.contains('active')).toBe(true);
+                checkButtonColor(button, colors[1]);
+            })
+            .then(done, done.fail);
+        });
+
         it('changes hover icon colors', function(done) {
             Plotly.newPlot(gd, [], {
                 modebar: {