GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing github.com — Fix stale modebar hover colors after style updates by Lexachoc · Pull Request #8024 · plotly/plotly.js

Conversation

Lexachoc commented Sep 5, 2026

Copy link

Copy Markdown

Contributor

Closes #8023

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);
	}
	});
	}

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

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

Comment thread

src/lib/dom.js

KoolADE85 Sep 9, 2026

Copy link

Copy Markdown

Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

Lexachoc Sep 13, 2026

Copy link

Copy Markdown

Contributor Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions


          add test

d0c1ea7

KoolADE85 previously approved these changes

Sep 14, 2026

View reviewed changes

KoolADE85 left a comment

Copy link

Copy Markdown

Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the bugfix! 💃

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

Comment thread

draftlogs/8024_fix.md Resolved

Uh oh!

There was an error while loading. Please reload this page.


          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

Uh oh!

There was an error while loading. Please reload this page.

Lexachoc deleted the fix-modebar-hover branch

October 10, 2026 17:45

Reviewers

KoolADE85

KoolADE85 approved these changes

Uh oh!

There was an error while loading. Please reload this page.

Assignees

KoolADE85

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG]: Modebar hover colors remain stale after color/activecolor updates when switching themes

Uh oh!

There was an error while loading. Please reload this page.

2 participants

Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.