Opened 6 months ago

Last modified 6 months 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:

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 6 months ago by Alastair Mooney

Description: modified (diff)

comment:2 Changed 6 months ago by Alastair Mooney

Description: modified (diff)

comment:3 Changed 6 months ago by Alastair Mooney

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