insecto
En react @ 15 podríamos establecer "valor" o "valor predeterminado", y el elemento seleccionado se desplazó a la vista.
https://codesandbox.io/s/6vx637r10n
Pero en react @ 16 esto no funciona.
https://codesandbox.io/s/7jqqz3zmo1
¡Intrigante! Me pregunto si hubo un cambio en cómo se asignó el elemento seleccionado en React 16.0.
Intenté echar un vistazo a estos archivos:
- https://github.com/facebook/react/blob/v15.6.2/src/renderers/dom/client/wrappers/ReactDOMSelect.js
- https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMFiberSelect.js
Lamentablemente, no pude encontrar tanta diferencia. (Perdón por mi falta de ayuda, pero estoy interesado en ver cómo se resolverá esto o si estaba buscando en el lugar equivocado).
¡Sin preocupaciones! Esos son los primeros lugares en los que buscaría también. Una diferencia que veo es que React 16.x asigna defaultSelected
después de selected
:
Me pregunto si esto está confundiendo a React. No puedo realizar la prueba en este momento, pero me pregunto si vería un cambio de desplazamiento si establece un punto de interrupción y recorre este bucle.
Hola Nathan, he estado explorando este problema durante algunas horas, instalé react 15.6.2 y 16.3.2, pude seguir la ejecución del programa con algunos puntos de interrupción, parece que la función:
updateOptions
establecerá uno de sus atributos de opción con "seleccionar" en verdadero (bueno) también selectedIndex se establece en 4 (también es bueno), pero desde aquí no puedo ver por qué el elemento no se imprime como debería, debido a sus parámetros parece estar bien. Además, no vi ninguna diferencia entre asignar defaultSelected
antes de selected
.
Cuando ejecuté esto a través de un depurador, selected
y defaultSelected
(dependiendo de cuál use) están configurados correctamente como true
atributos en el elemento apropiado <option>
DOM .
En el ejemplo 16.3.2, aún selecciona el valor pasado, simplemente no se desplaza hasta él. ¿Habría otro lugar para buscar en el renderizador donde se evalúe / verifique ese atributo de valor y el comportamiento esté cambiando allí? Hurgué, pero hay mucho código para analizar.
No estoy seguro de cuánto ayuda esto, pero hice una pequeña prueba usando el enlace @ kre0n provisto para encontrar la compilación de React donde comenzó a ocurrir el problema. Para probar, desinstalé y reinstalé cada versión de React usando la interfaz en codesandbox.
Por lo que observé, todo desde y después del lanzamiento de 16.0.0 causó este problema. Sabiendo que 15.6.2 estaba funcionando, decidí analizar todas las compilaciones previas al lanzamiento desde 16.0.0-alpha hasta que el problema comenzó a ocurrir.
Descubrí que la selección dejó de desplazarse al 'valor' proporcionado al elemento de selección en la compilación 16.0.0-alpha.3 .
No probé si se solucionó en una compilación posterior, pero pensé que el primer punto de falla podría ayudar de alguna manera.
Buenas tardes. Creo que identifiqué las causas de tal comportamiento no deseado, pero necesito más tiempo para investigar una solución adecuada. Entonces, si a nadie no le importa, me gustaría tomar este tema y hacer mi primer compromiso en el proyecto.
Actualizar. Parece que el tema es un poco más complicado de lo que pensaba. Estoy seguro de que este comportamiento se introdujo con la arquitectura de fibra de reacción. Seguiré intentando arreglarlo, aunque no sé cuánto tiempo puede llevar. Como no entré en los detalles de implementación antes, puede llevar algún tiempo
Lo siento. He viajado mucho :) Parece que este es un tema muy difícil.
@segoddnja Te
Tengo curiosidad por saber si algo le está sucediendo a la selección antes de tiempo que podría hacer que el desplazamiento se detenga. Me pregunto si hay un orden de asignaciones de propiedades / atributos que podría haber cambiado, lo que provocaría la detención del desplazamiento.
Aquí hay un fenómeno interesante, digamos que suceden los siguientes pasos:
https://codepen.io/nhunzaker/pen/vaZxvE
El desplazamiento todavía se centra en la primera opción, aunque la sexta opción es la única seleccionada.
Parece que, Chrome de todos modos, solo se desplaza al primer valor seleccionado cuando está _asignado_, no _no asignado.
Quizás esto esté relacionado.
@nhunzaker Sí, gracias, piensas en la dirección correcta. El navegador se desplaza a la primera opción que obtuvo la propiedad seleccionada como verdadera. Cualquier cambio adicional no causa desplazamiento.
Entonces, lo que he descubierto ahora. React crea el nodo selest
desnudo y le agrega opciones. Como el select
tiene multipe=false
, la primera opción agregada automáticamente obtiene selected=true
. Por lo tanto, cambiar más a modo múltiple y actualizar la selección de opciones no hace que se desplace.
Creo que es necesario establecer el valor del atributo multiple
antes de agregar opciones.
Comentario más útil
Buenas tardes. Creo que identifiqué las causas de tal comportamiento no deseado, pero necesito más tiempo para investigar una solución adecuada. Entonces, si a nadie no le importa, me gustaría tomar este tema y hacer mi primer compromiso en el proyecto.