Opened 3 years ago
Last modified 3 years ago
#15342 new bug
jQuery UI checkboxradio icon incorrect on back navigation
| Reported by: | Alastair Mooney | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | none |
| Component: | ui.checkbxoradio | Version: | 1.12.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description (last modified by )
When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected:
https://i.stack.imgur.com/iabQj.png
Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS:
.ui-state-hover, .ui-widget-content .ui-state-hover {
background-position-x: initial;
background-position-y: initial;
}
This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon:
<label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">
<span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span>
<span class="ui-checkboxradio-icon-space"> </span>
14 Jan 2020 - 24 Mar 2020
</label>
I can get the icons to load correctly on initial load and back navigation by calling
$( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" )
immediately after creating them.
I have narrowed down the issue to it occurring in Chrome and Firefox (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog.
I can reproduce it in Chrome (current version 74.0.3729.169) and Firefox (current version 67.0) on macOS with the following minimal code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page 1</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css">
<script>
$( document ).ready(function() {
$( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio();
$( "#my-dialog" ).dialog();
});
</script>
</head>
<body>
<div id="my-dialog">
<label for="test">Test</label>
<input type="checkbox" id="test" value="test">
<a href="page-2.html">Next</a>
</div>
</body>
</html>
Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page 2</title>
</head>
<body>
<p>Now navigate back.</p>
</body>
</html>
JSFiddle: https://jsfiddle.net/2dcy3jz5/2/
Originally asked at https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation.
Change History (3)
comment:1 Changed 3 years ago by
| Description: | modified (diff) |
|---|
comment:2 Changed 3 years ago by
| Description: | modified (diff) |
|---|
comment:3 Changed 3 years ago by
| Description: | modified (diff) |
|---|