template inside select is unusable on Firefox if you have a timer

[mariusGundersen]

Demo of bug

This is a fairly simple example where I have the current time shown and updated using a setInterval, and I have a <select> where the options are populated using a <template x-for="option in options">. If you try to select something in Firefox you will see that the dropdown isn't stable. I have a gif-recording showing how annoying this is:

It seems like alpine is replacing the contents of the <select> even when nothing changes, which isn't just really bad for performance but also causes this bug. Is there any workaround?

[ryangjchandler]

@mariusGundersen Alpine will re-render the component after each interval, if you're updating a piece of data. You'd be better off separating each into a separate component so that the updates don't affect one another.

[mariusGundersen]

Unfortunately in my scenario these two are rendered for a list, so I have this component several times in a page.

[SimoTod]

you just need to put an x-data attribute to the div containing your timer to make it a different component.