Sandbox::https://github.com/plotly/plotly.js/pull/8024

Lexachoc · 2026-09-05T23:16:50Z

This PR fixes modebar hover colors retaining the initial color and activecolor values after they are updated, for example when switching between light and dark themes.

setStyleOnHover() attaches the mouseenter and mouseleave listeners only once. As a result, both listeners therefore kept the activeStyleParts and inactiveStyleParts values from the initial call.

plotly.js/src/lib/dom.js

Lines 104 to 134 in c5ad356

    
           function setStyleOnHover(selector, activeSelector, childSelector, activeStyle, inactiveStyle, element) { 
        
               var activeStyleParts = activeStyle.split(':'); 
        
               var inactiveStyleParts = inactiveStyle.split(':'); 
        
               var eventAddedAttrName = 'data-btn-style-event-added'; 
        
               if (!element) { 
        
                   element = document; 
        
               } 
        
               element.querySelectorAll(selector).forEach(function(el) { 
        
                   if(!el.getAttribute(eventAddedAttrName)) { 
        
                       // Emulate ":hover" CSS style using JS event handlers to set the 
        
                       // style in a strict CSP-compliant manner. 
        
                       el.addEventListener('mouseenter', function() { 
        
                           var childEl = this.querySelector(childSelector); 
        
                           if(childEl) { 
        
                               childEl.style[activeStyleParts[0]] = activeStyleParts[1]; 
        
                           } 
        
                       }); 
        
                       el.addEventListener('mouseleave', function() { 
        
                           var childEl = this.querySelector(childSelector); 
        
                           if(childEl) { 
        
                               if(activeSelector && this.matches(activeSelector)) { 
        
                                   childEl.style[activeStyleParts[0]] = activeStyleParts[1]; 
        
                               } else { 
        
                                   childEl.style[inactiveStyleParts[0]] = inactiveStyleParts[1]; 
        
                               } 
        
                           } 
        
                       }); 
        
                       el.setAttribute(eventAddedAttrName, true); 
        
                   } 
        
               }); 
        
           }

KoolADE85 · 2026-09-09T18:04:24Z

Thanks for tracking this down, it works well on my end. The only thing I see missing is a regression test.
describe('modebar relayout') in test/jasmine/tests/modebar_test.js already covers this topic with "clicks", but it's clearly missing "hover". That seems like a good place to include some assertions around this change.

Thank you for the suggestion! I’ve added a regression test for it.

KoolADE85

Thanks for the bugfix! 💃

Lexachoc added 2 commits September 6, 2026 01:09

fix modebar hover colors

e9aac23

add draftlog

630bcf8

robertclaus requested a review from KoolADE85 September 8, 2026 19:14

robertclaus assigned KoolADE85 Sep 8, 2026

KoolADE85 requested changes Sep 10, 2026

View reviewed changes

add test

d0c1ea7

KoolADE85 previously approved these changes Sep 14, 2026

View reviewed changes

Comment thread draftlogs/8024_fix.md Outdated

Update draftlogs/8024_fix.md

78c3d74

KoolADE85 dismissed their stale review via 78c3d74 September 14, 2026 20:00

KoolADE85 approved these changes Sep 14, 2026

View reviewed changes

KoolADE85 merged commit b798d46 into plotly:main Sep 14, 2026
5 checks passed

Navigation Menu

Repository navigation

Fix stale modebar hover colors after style updates - #8024

Fix stale modebar hover colors after style updates#8024
KoolADE85 merged 4 commits into
plotly:mainfrom
Lexachoc:fix-modebar-hover

Lexachoc commented Sep 5, 2026

Uh oh!

KoolADE85 Sep 9, 2026

Uh oh!

Lexachoc Sep 13, 2026

Uh oh!

KoolADE85 left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	function setStyleOnHover(selector, activeSelector, childSelector, activeStyle, inactiveStyle, element) {
	var activeStyleParts = activeStyle.split(':');
	var inactiveStyleParts = inactiveStyle.split(':');
	var eventAddedAttrName = 'data-btn-style-event-added';
	if (!element) {
	element = document;
	}
	element.querySelectorAll(selector).forEach(function(el) {
	if(!el.getAttribute(eventAddedAttrName)) {
	// Emulate ":hover" CSS style using JS event handlers to set the
	// style in a strict CSP-compliant manner.
	el.addEventListener('mouseenter', function() {
	var childEl = this.querySelector(childSelector);
	if(childEl) {
	childEl.style[activeStyleParts[0]] = activeStyleParts[1];
	}
	});
	el.addEventListener('mouseleave', function() {
	var childEl = this.querySelector(childSelector);
	if(childEl) {
	if(activeSelector && this.matches(activeSelector)) {
	childEl.style[activeStyleParts[0]] = activeStyleParts[1];
	} else {
	childEl.style[inactiveStyleParts[0]] = inactiveStyleParts[1];
	}
	}
	});
	el.setAttribute(eventAddedAttrName, true);
	}
	});
	}

Conversation

Lexachoc commented Sep 5, 2026

Uh oh!

KoolADE85 Sep 9, 2026

Choose a reason for hiding this comment

Uh oh!

Lexachoc Sep 13, 2026

Choose a reason for hiding this comment

Uh oh!

KoolADE85 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants