Caching issues with on page reload with Combobox (Firefox only)

[sevenseacat]

I'm not sure if this is a LiveView issue, or a TomSelect issue, or a PetalComponents issue, but I thought I'd post it here to see if you have any insights.

With the following code in a form component:

<.combo_box
  label={gettext("Preferred Locations")}
  multiple
  placeholder="Select locations.."
  options={@locations}
  field={@form[:preferred_location_ids]}
  wrapper_class="md:col-span-2"
/>

It works great, I can use the combobox, update the selected values, validate, save, data gets saved, form keeps new selected values.

However, if I then reload the page (in Firefox only!!), the old values are still populated in the select box.

Navigating away and then back to the form again will clear it up, as will a hard refresh, and adding tom_select_options={%{items: @form[:preferred_location_ids}.value} (ie. the same thing as TomSelect should be inferring anyway), resolves it.

See attached video - the first refresh is a soft refresh (cmd+R), the second is a hard refresh (shift+cmd+R)

Screen.Recording.2025-02-05.at.3.29.06.PM.mov

(added note - to get the dropdown of the combo box to appear properly I had to remove overflow-hidden from the box component - how many dramas is that going to cause me?)

[mitkins]

I tried the following too (in Firefox):

• Choose a value
• Navigate to another page
• Navigate back
• Tom select is blank
• Soft refresh brings it back!

I'm not sure what's going on here. I'm trying to isolate...

[mitkins]

So I think this is a Firefox caching issue. Tom Select is tied to a "shadow" select so it can be added to the page. Both the Tom Select and the shadow select are inside an element that Live View has been told to ignore. So when the refresh occurs, Firefox is being smart and remembering the selected options for the shadow select.

Chrome isn't "smart" and doesn't do this.

I'm adding some code that resets the shadow select when the hook is mounted. This seems to have made the behaviour consistent across Chrome and Firefox