Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Chromium bfcache issue

See original GitHub issue

I’ve searched issues both here and on Stack Overflow, but only found Select2 Dropdown not working after browser back button used which was unanswered.

I believe this is an issue that is related to the bfcache (back-forward cache) in Chrome 79 as this wasn’t an issue in Chrome 78. I don’t feel like it’s a bug in Select2, but since others may encounter it I thought this would be a good place to raise it.

The code below demonstrates the issue when using the latest version of Chrome on Windows 10.

<html>
    <head>
        <title>Test Page</title>
        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.css">
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"></script>
    </head>
    <body>
        <h1>Test Page</h1>

        <select id="example" style="width: 300px" multiple data-placeholder="Select Month">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>

        <a href="https://www.google.com/">Google</a>

        <script type="text/javascript">
            window.onload = function () {
                $('#example').select2();

                /*setTimeout(function () {
                    $('#example').select2();
                }, 100);*/
            }
        </script>
    </body>
</html>

When running you select items in the dropdown and then navigate away from the page using the hyperlink and then returning to the page by pressing the browser back button the previously selected items aren’t shown, only the placeholder. However when you go to make a selection the previously selected items are highlighted in the dropdown (see images in SO question for an example).

The only way I was able to workaround this was to set a short timeout when initializing the select2 (see commented out code). I initially thought using the pageshow event would work, but that had the same result as onload event. Anyway I’m hoping someone reading this is able to reproduce in Chrome 79 and if so, suggest the best way to resolve the issue. Thanks!