Back Arrow In Edge – Value In JS Doesn’t Match Dropdown Selection

I’m having an issue when clicking the back arrow in Microsoft Edge, for a shopping cart that sends various select options to different PHP files via Ajax. I’ve never had back arrow working correctly in Edge or Chrome, but I’ve now decided I’d like to try and fix it.

Therefore, I’ve created a small test program that demonstrates the problem perfectly. You’ll notice that I’ve included the code (two HTML files), and a 33 second video which shows the test program running, with Edge on the left and Firefox on the right.

As shown in the video, the steps to reproduce the issue are as follows…

  1. Select option 2
  2. Navigate to page 2 by clicking the link
  3. Click the back arrow

Here’s the video: https://youtu.be/J3tLFXjPDdA

When the page loads after clicking the back arrow, the JS runs again, i.e. by default in Edge for this example bfcache is disabled, but for Firefox I’ve disabled bfcache with window.onunload

Here’s the problem… within window.onload, getElementById(“options”).value returns “option-1” after clicking back arrow, which does not match the selected option “Option 2” that is visible.

Bizarrely, I then discovered that just by delaying the call to getElementById(“options”).value by setting setTimeout(), the value returned then becomes “option-2” which is correct. Keep in mind that this code is inside window.onload.

I don’t want to simply reload the page on back arrow as a fix. I’d much rather learn why this mismatch of visible selection vs returned value is happening… and it is only in Edge and Chrome.

To run the test program, for each of the two pages simply copy the code into a text file and change the extension to .htm, and then right click on …page-1.htm and select open with Edge.

<!DOCTYPE html>

<label for="options">Select Option</label>
<select id="options">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
</select>

<a href="back-arrow-issue-page-2.htm">Page 2</a>

<script>
  window.onpageshow = function(event) // testing for bfcache
  {
    if (event.persisted)
      alert("From bfcache");
  };

  window.onunload = function(){}; // disables bfcache in Firefox when running an htm file from a local drive, so that the script will run for a second time, i.e. after clicking back arrow. Note: this doesn't disable bfcache when running a local htm file in Safari

  window.onload = function()
  {
    console.log("in: window.onload");
    let performance_entries = performance.getEntriesByType("navigation");

    for (var i = 0; i < performance_entries.length; ++i)
    {
      console.log(performance_entries[i].type);

      if (performance_entries[i].type == "back_forward")
      {
        console.log(document.getElementById("options").value);
        setTimeout(delay_test, 0); // 1 worked, and so I then tried 0 which also works
      }
    }
    function delay_test()
    {
      console.log(document.getElementById("options").value);
    }
  }
</script>

<!DOCTYPE html>

<a href="back-arrow-issue-page-1.htm">Page 1</a>

Cheers, Gary.