New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Select multiple - does not scroll to selected item(items) #13222
Comments
Intriguing! I wonder if there was a change in how the selected item was assigned in React 16.0. |
I tried to take a look at these files: -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 Sadly I wasn't able to find that much difference. (Sorry for my lack of help but I am interested in seeing how this will be resolved or if I was looking at the wrong place). |
No worries! Those are the first places I'd look too. One difference I see is that React 16.x assigns I wonder if this is throwing off React. I'm not able to test at the moment myself, but I wonder if you'd see a scroll change if you set a breakpoint and stepped through this loop. |
Hello Nathan, I have been exploring this issue for some hours, I installed react 15.6.2 and 16.3.2, I was able to follow the program execution with some breakpoints, it seems like the function:
will set one of its option attributes with "select" to true (good) also selectedIndex is set to 4 (also good), but from here I am not able to see why the element is not printed the way it should, because its parameters seem to be okay. Also I saw no difference between assigning |
When I ran this through a debugger In the 16.3.2 example it does still select the value passed, it just doesn't scroll to it. Would there be somewhere else to look in the renderer where that value attribute is assessed/checked and the behavior is changing there? I poked around but there is a lot of code to parse through. |
Not sure how much this helps, but I did a small test using the link @kre0n supplied to find the build of React where the issue first started occurring. To test, I uninstalled and reinstalled each version of React using the interface on codesandbox. From what I observed, everything from and after the release of 16.0.0 caused this issue to occur. Knowing that 15.6.2 was working, I decided to look into all of the pre-release builds leading from 16.0.0-alpha on up until the issue first started occurring. I found that the select stopped scrolling to the 'value' supplied to the select element in build 16.0.0-alpha.3. I did not test if it was fixed in a later build, but I figured first point of failure could help in some way. |
Good afternoon. I think I identified what causes such undesired behavior, but, I need some more time to investigate a proper fix. So, if nobody do not mind, I would like to take this issue and do my first commitment into project. |
Update. It appears that issue is a bit more complicated than I have thought. I am sure that this behavior introduced with react fiber architecture. I'll keep trying to fix it though I don't know how much time can it take. As I did not get into the implementation details before, it can take some time |
Sorry. I've been doing a lot of travel :) Sounds like this is a really tough issue. @segoddnja I'll assign this to you, but no pressure to burn a lot of time on this on your own. Let's try to figure out a hypothesis and maybe we can work together to resolve it. |
I'm curious if something is happening to the select ahead of time that could cause scrolling to stop. I wonder if there's an order of property/attribute assignments that could have changed which would lead to scrolling stopping. |
Here's an interesting phenomena, let's say the following steps happen: https://codepen.io/nhunzaker/pen/vaZxvE
Scrolling is still focused on the first option, even though the 6th option is the only one selected. It appears that, Chrome anyway, only scrolls to the first selected value when assigned, not _unassigned. Maybe this is related. |
@nhunzaker Yep, thanks, you think in the right direction. Browser scrolls to the first option which got selected property true. Any further changes doesn't cause scroll. So, what I have discovered now. React creates bare I think it is necessary to set |
…tate before appending options fixes facebook#13222
…rst selected option fixes facebook#13222
…rst selected option fixes facebook#13222
…tate before appending options (#13270) * Make sure that `select` has `multiple` attribute set to appropriate state before appending options fixes #13222 * Add dom test fixture to test long multiple select scrolling to the first selected option fixes #13222 * typo fix * update comment remove redundant conversion to bool type * change a way of assigning property to domElement * Remove unused ref on select fixture form
bug
In react@15 we could set "value" or "defaultValue", and selected element scrolled into view.
https://codesandbox.io/s/6vx637r10n
But in react@16 this does not work.
https://codesandbox.io/s/7jqqz3zmo1
The text was updated successfully, but these errors were encountered: