This code restores the hover effect for reactions. Add to Theme Designer: Core CSS & JS ;(function () {
'use strict';
// Extend the native controller, including reactions added by AJAX.
ips.controller.mixin('reactionHover', 'core.front.core.reaction', true, function () {
const initialize = this.initialize;
this.initialize = function () {
initialize.apply(this, arguments);
if (this._singleReaction) {
return;
}
const button = this._reactButton[0];
const menu = button && document.getElementById(button.getAttribute('popovertarget'));
if (!menu || typeof menu.showPopover !== 'function') {
return;
}
const desktop = window.matchMedia('(hover: hover) and (pointer: fine)');
let openedByHover = false;
let closeTimer;
this.on('pointerenter', '[data-role="reactionInteraction"]', function (event) {
const pointerType = event.originalEvent?.pointerType || event.pointerType;
if (!desktop.matches || pointerType !== 'mouse') {
return;
}
clearTimeout(closeTimer);
if (menu.matches(':popover-open')) {
return;
}
const previousFocus = document.activeElement;
// i-dropdown focuses its first item. Hover should keep the current focus.
menu.addEventListener('toggle', function (toggle) {
if (toggle.newState !== 'open') {
return;
}
window.requestAnimationFrame(function () {
if (!openedByHover || !menu.contains(document.activeElement)) {
return;
}
if (previousFocus === document.body) {
document.activeElement.blur();
} else if (previousFocus?.isConnected) {
previousFocus.focus({preventScroll: true});
}
});
}, {once: true});
openedByHover = true;
menu.showPopover({source: button});
});
this.on('pointerleave', '[data-role="reactionInteraction"]', function () {
if (!openedByHover) {
return;
}
// Allow the pointer to cross the gap between the icon and its menu.
closeTimer = setTimeout(function () {
if (openedByHover && menu.matches(':popover-open')) {
menu.hidePopover();
}
openedByHover = false;
}, 250);
});
this.on('keydown', '[data-role="reactionInteraction"]', function () {
clearTimeout(closeTimer);
openedByHover = false;
});
};
});
}());