Tested On:
Photoshop 24.0.0
UXP Version: 6.3.3
Photoshop 23.5.0 (API Version: 2)
UXP Version: 6.2.1
Issue:
The :hover
pseudo class is not being cleared when sp-action-button
elements are disabled.
Thus, when the button is later re-enabled, the :hover
class remains, styling the button even if the mouse cursor is not currently over the button.
Here is a contrived example with a single button, that when clicked, disables and re-enables itself after 3 seconds. Pull your cursor away after clicking and when the button is re-enabled, it still thinks it is being hovered over.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
</head>
<style>
body {
padding: 20px;
}
#btn-test {
background-color: white;
color: black;
}
#btn-test:hover {
background-color: red;
color: white;
}
#btn-test[disabled] {
background-color: gray;
color: darkgray;
}
</style>
<body>
<sp-action-button id="btn-test">Disable For 3 Seconds</sp-action-button>
</body>
</html>
index.js
const elTestButton = document.getElementById('btn-test');
elTestButton.addEventListener('click', () => {
elTestButton.disabled = true;
setTimeout(() => {
elTestButton.disabled = false;
}, 3000);
});