I have a form with two select inputs that are used to pick values from a list using some simple jquery script. Think of it as a lightweight picklist.
For the sake of testing I have reduced everything to the bare minimum. The form now only contains one text input for sanity, and the two selects for showing and picking data. Basically it comes down to this:
<form>
<input name="name" type="text">
<select></select> <!-- contains search results -->
<select name="members[]"></select> <!-- contains the current selection -->
<button type="submit">
</form>
The javascript attaches an event listener to the select elements in order to allow the user to select and deselect values, which are moved from one to the other.
On submit, javascript selects all values in members[] so that they will be sent in the POST request.
With Firefox and Safari, everything works. Submitting the form sends the auto-selected values from members[] to the server. Any combination of selecting, deselecting, works fine.
With Chrome (102.0.5005.115) however, strange behavior is observed:
- nothing changes: all values from
members[]are POSTed - 1 value added: all values from
members[]are POSTed - 1 value removed: no values from
members[]are POSTed - 1 value removed and re-added: only that value from
members[]is POSTed - 1 value added and 1 removed: no values from
members[]are POSTed
It seems that manipulating the contents of the members[] select box sometimes confuses Chrome and makes it forget to send the values across.
I have a JSFiddle where this can be tested. The form is not submitted in this test but the serialization is logged to console and shows the described erroneous behavior.
https://jsfiddle.net/y54fq7L6/1/
Has anyone seen this happen? Am I doing something wrong?