Disabling a button does not remove ui-state-focus or ui-state-hover
Scenario
Clicking a button that disables itself after processing some logic, does not remove ui-state-focus or ui-state-hover.
- <script type="text/javascript">
- $(document).ready(function () {
- $(".editButton").button();
- }
- function removeButton_onclick() {
- // Process something...
- $('#removeButton').button("disable");
- }
- </script>
- <button
- id='removeButton'
- class='editButton'
- type="button"
- onclick='removeButton_onclick();'>
- Remove
- </button>
The above code does not completely remove the state and styling for the button.
It then gets stuck in a hover state once re-enabled. No amount of clicking or hovering will reset the button.
The above picture does not have the mouse pointer over it (Windows printscreen doesn't capture mouse pointer).
Workaround
Including the following code when disabling a button:
- $('#removeButton').removeClass('ui-state-focus');
- $('#removeButton').removeClass('ui-state-hover');
resolves the problem.
Target client platform: IE 8
JQuery UI: 1.8
Anthony
Update: JQuery UI: 1.8.2 has same problem.