Select box selection is not restored when using back button (works in turbolinks-classic)

[pierre-pretorius]

Hi

This can easily be reproduced with a blank new rails app. I've created one here: https://github.com/pierre-pretorius/turbolinks_test

1. On the items#new form you enter a name and select a type in the select box.

2. Click "Go to items" and then press the browser back button. The name text is restored but the selected type is not restored. With turbolinks-classic the select box selection is restored correctly.

[richardcrichardc]

I just hit the same issue.

The problem appears to be that the page is saved and restored by taking a snapshot of the DOM, which for a select box does not include information about any changes to selection since the page was loaded.

The following code (coffeescript) adds an event handler which is fired just prior to the page being saved by Turbolinks. It finds all select elements in the document, and adds the selected attribute to the option that is currently selected.

With the selection information now in the DOM, the selection is now restored after navigating away then back to the page containing the form.

document.addEventListener "turbolinks:before-cache", () ->
  $('select').each () ->
    el = $(this)
    selected = el.val()
    el.find('option').attr('selected', null)
    if selected
      el.find('option[value='+selected+']').attr('selected', true)

[yuriihabrusiev]

Thanks @richardcrichardc!

I had same issue, but I'm using selectize for my selects. So here is my fix:

resetSelectized = (index, select) ->
  selectedValue = select.selectize.getValue()
  select.selectize.destroy()
  if selectedValue
    $select = $(select)
    $select.find('option').attr('selected', null)
    $select.find("option[value=#{selectedValue}]").attr('selected', true)

document.addEventListener 'turbolinks:before-cache', ->
  $('.selectized').each resetSelectized

[mahadevmandole]

$(document).ready(function() {
$("select").each(function () {
$(this).val($(this).find('option[selected]').val());
});

});

[phoet]

The only viable solution I found for this issue was to disable caching by setting response headers:

response.headers["Cache-Control"] = "no-cache, no-store"
response.headers["Pragma"] = "no-cache"
response.headers["Expires"] = "Mon, 01 Jan 1990 00:00:00 GMT"

At first I had a hard time debugging this issue because I had the developer-tools open with caching disabled 🤦

I'm not sure how it is actually supposed to behave?! Is it expected behavior that after a redirct-after-post and a broser-back-button the initial form-data is supposed to be presented to the user? That feels so weird!

[DannyMichaels]

Thanks @richardcrichardc!

I had same issue, but I'm using selectize for my selects. So here is my fix:

resetSelectized = (index, select) ->
  selectedValue = select.selectize.getValue()
  select.selectize.destroy()
  if selectedValue
    $select = $(select)
    $select.find('option').attr('selected', null)
    $select.find("option[value=#{selectedValue}]").attr('selected', true)

document.addEventListener 'turbolinks:before-cache', ->
  $('.selectized').each resetSelectized

Hello, this approach has helped me fix a problem where a select would stop working when clicking back on the browser, however, now the select dropdown options are the browser native ones without the custom styling, I have tried to do $select.selectize() with no luck of bringing the styling back, any ideas? Thank you.