Opened 4 years ago
Last modified 4 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 4 years ago by
Description: | modified (diff) |
---|
comment:2 Changed 4 years ago by
Description: | modified (diff) |
---|
comment:3 Changed 4 years ago by
Description: | modified (diff) |
---|