Trouble with browser back and form reset

[tmalaher]

I'm having trouble with Alpine forms that submit to a form-processing page.

If you hit "back" after submitting, then when you return to the form, the form elements and the underlying x-model data are out of sync. (It seems like only "text" inputs are properly updated)

Likewise if you use a <input type="reset"/> then when it's clicked the form elements reset, but the x-model is not updated.

It seems like the browswer (Chrome 93.0.4577.82) does not consider "reset" or "going back to the form" as something that fires x-on:change or otherwise update the x-model.

See https://codepen.io/tmalaher/details/bGRmGPQ

Try this:

• Fill out the form, hit submit, hit back. Compare the DL data below the HR with the form itself.
• Fill out the form, hit reset. Note that the DL data does not change.

Also problematic: I can't figure out what value is going to get submitted for a checkbox. the "value" attribute or "true".

[Background:
I was converting an old crufty jQuery form to alpine. Everything is much simpler.
However the old form, since it was using $('#field').val() and the like as it's "data model", it had no difficulty dealing with the browser back button and form reset behavior. Whatever was in the form was the value. Period.
]

[Chandler-Zhu]

I tried to add a <input type="reset"/> in my app too but it does not even reset the input field, then I had to add a button with @click="city=''" luckily I only had one field