Tengo un formulario con dos entradas de selección que se usan para elegir valores de una lista usando un script jquery simple. Piense en ello como una lista de selección ligera.

En aras de las pruebas, he reducido todo al mínimo. El formulario ahora solo contiene una entrada de texto para la cordura, y las dos selecciones para mostrar y seleccionar datos. Básicamente se reduce a esto:

 <form> <input name="name" type="text"> <select></select> <!-- contains search results --> <select name="members[]"></select> <!-- contains the current selection --> <button type="submit"> </form>

El javascript adjunta un detector de eventos a los elementos select para permitir que el usuario seleccione y anule la selección de valores, que se mueven de uno a otro.

Al enviar, javascript selecciona todos los valores en los members[] para que se envíen en la solicitud POST.

Con Firefox y Safari , todo funciona. Al enviar el formulario, se envían los valores seleccionados automáticamente de los members[] al servidor. Cualquier combinación de seleccionar, deseleccionar, funciona bien.

Sin embargo, con Chrome (102.0.5005.115), se observa un comportamiento extraño:

• nada cambia: todos los valores de los members[] se publican
• 1 valor agregado: todos los valores de los members[] se publican
• 1 valor eliminado: no se envía ningún valor de los members[]
• 1 valor eliminado y vuelto a agregar: solo ese valor de members[] se publica
• 1 valor agregado y 1 eliminado: no se envía ningún valor de los members[]

Parece que manipular el contenido del cuadro de selección de members[] a veces confunde a Chrome y hace que se olvide de enviar los valores.

Tengo un JSFiddle donde esto se puede probar. El formulario no se envía en esta prueba, pero la serialización se registra en la consola y muestra el comportamiento erróneo descrito.

https://jsfiddle.net/y54fq7L6/1/

¿Alguien ha visto que esto suceda? ¿Estoy haciendo algo mal?