Merge pull request #7338 from plotly/hover-bug

Fix hover bug
plotly · Jan 17, 2025 · 4097d1c · 4097d1c
2 parents 9010f78 + dcd6d4a
commit 4097d1c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
@@ -60,9 +60,6 @@ proto.update = function(graphInfo, buttons) {
     document.querySelectorAll(groupSelector).forEach(function(group) {
         group.style.backgroundColor = style.bgcolor;
     });
-    // set styles on hover using event listeners instead of inline CSS that's not allowed by strict CSP's
-    Lib.setStyleOnHover('#' + modeBarId + ' .modebar-btn', '.active', '.icon path', 'fill: ' + style.activecolor, 'fill: ' + style.color);
-
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
     var needsNewLogo = (this.hasLogo !== context.displaylogo);
@@ -92,6 +89,10 @@ proto.update = function(graphInfo, buttons) {
     }
 
     this.updateActiveButton();
+
+    // set styles on hover using event listeners instead of inline CSS that's not allowed by strict CSP's
+    Lib.setStyleOnHover('#' + modeBarId + ' .modebar-btn', '.active', '.icon path', 'fill: ' + style.activecolor, 'fill: ' + style.color, this.element);
+
 };
 
 proto.updateButtons = function(buttons) {

diff --git a/src/lib/dom.js b/src/lib/dom.js
@@ -101,12 +101,14 @@ function deleteRelatedStyleRule(uid) {
  * @param {string} activeStyle    style that has to be applied when 'hovered' or 'active'
  * @param {string} inactiveStyle    style that has to be applied when not 'hovered' nor 'active'
  */
-function setStyleOnHover(selector, activeSelector, childSelector, activeStyle, inactiveStyle) {
+function setStyleOnHover(selector, activeSelector, childSelector, activeStyle, inactiveStyle, element) {
     var activeStyleParts = activeStyle.split(':');
     var inactiveStyleParts = inactiveStyle.split(':');
     var eventAddedAttrName = 'data-btn-style-event-added';
-
-    document.querySelectorAll(selector).forEach(function(el) {
+    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.