From dcd6d4a9b682eb541587bb6bac341020dda45abd Mon Sep 17 00:00:00 2001
From: Martha Cryan <martha.cryan326@gmail.com>
Date: Fri, 17 Jan 2025 14:23:30 -0600
Subject: [PATCH] Fix hover bug

---
 src/components/modebar/modebar.js | 7 ++++---
 src/lib/dom.js                    | 8 +++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index a455474c6e4..f51bcd40667 100644
--- 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
index b1b06c44314..b2fc54aaea0 100644
--- 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.