React: Selecionar vários - não rola para o item selecionado (itens)

Intrigante! Eu me pergunto se houve uma mudança em como o item selecionado foi atribuído no React 16.0.

Tentei dar uma olhada nestes arquivos:

- 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

Infelizmente, não consegui encontrar tanta diferença. (Desculpe pela falta de ajuda, mas estou interessado em ver como isso vai ser resolvido ou se eu estava olhando no lugar errado).

Não se preocupe! Esses são os primeiros lugares que eu também procuro. Uma diferença que vejo é que o React 16.x atribui defaultSelected após selected :

https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMFiberSelect.js#L95

Eu me pergunto se isso está atrapalhando o React. Não estou conseguindo testar no momento, mas me pergunto se você veria uma mudança de rolagem se definir um ponto de interrupção e passar por esse loop.

Olá Nathan, estou explorando esse problema há algumas horas, instalei o react 15.6.2 e 16.3.2, consegui acompanhar a execução do programa com alguns breakpoints, parece que a função:

updateOptions

irá definir um dos seus atributos de opção com "select" para true (bom) também selectedIndex está definido para 4 (também bom), mas a partir daqui não consigo ver porque o elemento não é impresso da maneira que deveria, porque seus parâmetros parece estar bem. Além disso, não vi diferença entre atribuir defaultSelected antes de selected .

Quando eu executei isso por meio de um depurador selected e defaultSelected (dependendo de qual você usa) estão ambos corretamente definidos como true atributos no elemento <option> DOM apropriado .

No exemplo 16.3.2, ele ainda seleciona o valor passado, apenas não rola até ele. Haveria outro lugar para olhar no renderizador onde aquele atributo de valor é avaliado / verificado e o comportamento está mudando lá? Eu vasculhei, mas há muito código para analisar.

Não sei o quanto isso ajuda, mas fiz um pequeno teste usando o link @ kre0n fornecido para encontrar a compilação do React onde o problema começou a ocorrer. Para testar, desinstalei e reinstalei cada versão do React usando a interface do codesandbox.

Pelo que observei, tudo desde e após o lançamento de 16.0.0 causou esse problema. Sabendo que o 15.6.2 estava funcionando, decidi examinar todas as compilações de pré-lançamento desde 16.0.0-alpha até o problema começar a ocorrer.

Eu descobri que o select parou de rolar para o 'valor' fornecido para o elemento select no build 16.0.0-alpha.3 .

Não testei se foi corrigido em uma compilação posterior, mas imaginei que o primeiro ponto de falha poderia ajudar de alguma forma.

Boa tarde. Acho que identifiquei o que causa esse comportamento indesejado, mas preciso de mais algum tempo para investigar uma correção adequada. Então, se ninguém não se importar, gostaria de pegar essa questão e fazer meu primeiro compromisso em projeto.

Atualizar. Parece que o problema é um pouco mais complicado do que eu pensava. Tenho certeza de que este comportamento foi introduzido com a arquitetura de fibra reag. Vou continuar tentando consertar, embora não saiba quanto tempo pode demorar. Como não entrei em detalhes de implementação antes, pode levar algum tempo

Desculpa. Tenho viajado muito :) Parece que essa é uma questão muito difícil.

@segoddnja Vou atribuir isso a você, mas sem pressão para

Estou curioso para saber se algo está acontecendo ao selecionar antes do tempo que pode causar a interrupção da rolagem. Gostaria de saber se há uma ordem de atribuições de propriedade / atributo que poderia ter mudado, o que levaria à interrupção da rolagem.

Aqui está um fenômeno interessante, digamos que as seguintes etapas aconteçam:

https://codepen.io/nhunzaker/pen/vaZxvE

1. Dadas 6 opções
2. Você seleciona a primeira opção
3. Você seleciona a 6ª opção
4. Você desmarca a primeira opção

A rolagem ainda está focada na primeira opção, embora a 6ª opção seja a única selecionada.

Parece que, de qualquer maneira, o Chrome só rola para o primeiro valor selecionado quando _assigned_, não _unassigned.

Talvez isso esteja relacionado.

@nhunzaker Sim, obrigado, você pensa na direção certa. O navegador rola para a primeira opção que obteve a propriedade selecionada como verdadeira. Quaisquer outras alterações não causam rolagem.

Então, o que descobri agora. O React cria o nó selest e adiciona opções a ele. Como select nua tem multipe=false , a primeira opção anexada automaticamente obtém selected=true . Portanto, alternar para o modo múltiplo e atualizar a seleção de opções não causa a rolagem.

Eu acho que é necessário definir o valor do atributo multiple antes de acrescentar opções.