React: Pilih beberapa - tidak menggulir ke item yang dipilih (item)

Menarik! Saya ingin tahu apakah ada perubahan dalam cara penetapan item yang dipilih di React 16.0.

Saya mencoba melihat file-file ini:

- 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

Sayangnya saya tidak dapat menemukan banyak perbedaan. (Maaf atas kurangnya bantuan saya tetapi saya tertarik untuk melihat bagaimana ini akan diselesaikan atau jika saya melihat di tempat yang salah).

Jangan khawatir! Itu adalah tempat pertama yang saya lihat juga. Satu perbedaan yang saya lihat adalah bahwa React 16.x memberikan defaultSelected setelah selected :

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

Aku ingin tahu apakah ini membuang React. Saya tidak dapat menguji sendiri saat ini, tetapi saya ingin tahu apakah Anda akan melihat perubahan gulir jika Anda menetapkan breakpoint dan melangkah melalui loop ini.

Halo Nathan, saya telah menjelajahi masalah ini selama beberapa jam, saya menginstal react 15.6.2 dan 16.3.2, saya dapat mengikuti eksekusi program dengan beberapa breakpoint, sepertinya fungsinya:

updateOptions

akan menetapkan salah satu atribut opsi dengan "pilih" menjadi benar (baik) juga dipilih Indeks disetel ke 4 (juga baik), tetapi dari sini saya tidak dapat melihat mengapa elemen tidak dicetak sebagaimana mestinya, karena parameternya sepertinya baik-baik saja. Juga saya melihat tidak ada perbedaan antara menetapkan defaultSelected sebelum selected .

Ketika saya menjalankan ini melalui debugger selected dan defaultSelected (tergantung yang Anda gunakan) keduanya disetel dengan benar sebagai atribut true pada elemen <option> DOM yang sesuai .

Dalam contoh 16.3.2 itu masih memilih nilai yang diteruskan, hanya tidak menggulir ke sana. Apakah akan ada tempat lain untuk dicari di perender tempat atribut nilai tersebut dinilai / diperiksa dan perilakunya berubah di sana? Saya melihat-lihat tetapi ada banyak kode untuk diuraikan.

Tidak yakin seberapa banyak ini membantu, tetapi saya melakukan tes kecil menggunakan tautan @ kre0n yang disediakan untuk menemukan build React di mana masalah pertama kali mulai terjadi. Untuk mengujinya, saya menghapus dan menginstal ulang setiap versi React menggunakan antarmuka di Codesandbox.

Dari apa yang saya amati, segala sesuatu dari dan setelah rilis 16.0.0 menyebabkan masalah ini terjadi. Mengetahui bahwa 15.6.2 berfungsi, saya memutuskan untuk melihat semua build pra-rilis yang dimulai dari

Saya menemukan bahwa pemilihan berhenti menggulir ke 'nilai' yang dipasok ke elemen pemilihan di build 16.0.0-alpha.3 .

Saya tidak menguji apakah itu diperbaiki di build selanjutnya, tetapi saya pikir titik kegagalan pertama dapat membantu dalam beberapa cara.

Selamat sore. Saya rasa saya telah mengidentifikasi apa yang menyebabkan perilaku yang tidak diinginkan tersebut, tetapi, saya perlu lebih banyak waktu untuk menyelidiki perbaikan yang tepat. Jadi, jika tidak ada yang tidak keberatan, saya ingin mengangkat masalah ini dan melakukan komitmen pertama saya ke dalam proyek.

Memperbarui. Tampaknya masalahnya sedikit lebih rumit dari yang saya kira. Saya yakin bahwa perilaku ini diperkenalkan dengan arsitektur react fiber. Saya akan terus berusaha memperbaikinya meskipun saya tidak tahu berapa lama waktu yang dibutuhkan. Karena saya tidak membahas detail implementasi sebelumnya, ini bisa memakan waktu

Maaf. Saya telah melakukan banyak perjalanan :) Sepertinya ini adalah masalah yang sangat sulit.

@segoddnja Saya akan memberikan ini kepada Anda, tetapi tidak ada tekanan untuk menghabiskan banyak waktu untuk ini sendiri. Mari kita coba mencari hipotesis dan mungkin kita bisa bekerja sama untuk menyelesaikannya.

Saya ingin tahu apakah terjadi sesuatu pada pilihan sebelumnya yang dapat menyebabkan pengguliran berhenti. Saya ingin tahu apakah ada urutan penugasan properti / atribut yang bisa berubah yang akan menyebabkan pengguliran berhenti.

Inilah fenomena yang menarik, misalkan langkah-langkah berikut terjadi:

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

1. Diberikan 6 pilihan
2. Anda memilih opsi pertama
3. Anda memilih opsi ke-6
4. Anda batal memilih opsi pertama

Pengguliran tetap fokus pada opsi pertama, padahal opsi ke-6 adalah satu-satunya yang dipilih.

Tampaknya, Chrome juga, hanya men-scroll ke nilai yang dipilih pertama saat _assigned_, bukan _unassigned.

Mungkin ini terkait.

@nhunzaker Ya, terima kasih, Anda berpikir ke arah yang benar. Browser menggulir ke opsi pertama yang menjadikan properti yang dipilih benar. Perubahan lebih lanjut tidak menyebabkan gulir.

Jadi, apa yang saya temukan sekarang. React membuat node selest dan menambahkan opsi padanya. Karena select memiliki multipe=false , opsi pertama yang ditambahkan secara otomatis mendapatkan selected=true . Jadi, beralih lebih lanjut ke beberapa mode dan pilihan opsi pembaruan tidak menyebabkannya bergulir.

Saya rasa perlu untuk menetapkan nilai atribut multiple sebelum menambahkan opsi.