Fix stale modebar hover colors after style updates

[Lexachoc]

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

[KoolADE85]

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.

[Lexachoc]

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

[KoolADE85]

Thanks for the bugfix! 💃