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 Alastair Mooney)

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:

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

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">
    <title>Page 1</title>
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="" type="text/css">
        $( document ).ready(function() {
            $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio();
            $( "#my-dialog" ).dialog();
    <div id="my-dialog">
        <label for="test">Test</label>
        <input type="checkbox" id="test" value="test">
        <a href="page-2.html">Next</a>

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">
    <title>Page 2</title>
    <p>Now navigate back.</p>


Originally asked at

Change History (3)

comment:1 Changed 4 years ago by Alastair Mooney

Description: modified (diff)

comment:2 Changed 4 years ago by Alastair Mooney

Description: modified (diff)

comment:3 Changed 4 years ago by Alastair Mooney

Description: modified (diff)
Note: See TracTickets for help on using tickets.