Select2 placeholder covers selected option when navigating backward with browser

#1

Reproducing the issue

  1. Select an option in the select2 element.
  2. Navigate to any other page (www.google.com)
  3. Navigate backwards using the browser back button
  4. Notice the option is “selected” but the shown option is not the “selected” option, but instead the option the select2 element is initialized with. (This could be the option or a placeholder)
<html>
        <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
        <link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
        <script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

        <select id="example" style="width: 300px">
            <option></option>
            <option value="JAN">January</option>
            <option value="FEB">February</option>
            <option value="MAR">March</option>
            <option value="APR">April</option>
            <option value="MAY">May</option>
            <option value="JUN">June</option>
            <option value="JUL">July</option>
            <option value="AUG">August</option>
            <option value="SEP">September</option>
            <option value="OCT">October</option>
            <option value="NOV">November</option>
            <option value="DEC">December</option>
        </select>

        <script>
                $('#example').select2({
                    allowClear: true,
                    placeholder: 'Select a month'
                });
        </script>
</html>

Attempted Solutions

I know of a “fix” but it requires me to place every select2 call within a window.onpageshow listener.

This solution is heavy handed and doesn’t address the actual issue with the placeholder/initialized options replacing the selected option on page load. It instead just overwrites the offending css with the select2 initialization.

Conclusion

I’m looking for a more conclusive answer to this problem, targeting it at the source. Can anyone help me in identifying what css/js to override to remedy this placeholder replacement of selected options on page load when a selected option is present?

Thanks for reading.