-
Notifications
You must be signed in to change notification settings - Fork 794
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]: sometimes, brief flash of no items (resulting in undefined ref on initial render at top of viewport) #1795
Comments
OK while I can't repro this exactly, I have at least discovered the cause in our codebase:
That's because primitives/packages/react/collection/src/Collection.tsx Lines 109 to 110 in f0a7495
However, I think this just immediately gets re-rendered, and the node does exist, so generally this isn't a problem. Except of course if any of the code in
For now we're fixing this locally by changing all refs to const isFirstItem = selectedItem === items[0]?.ref.current Because there's an immediate re-render, I think this is fine... at least it's causing us no issues. I am happy to make this PR, but that's only if:
Let me know if I can help any more with this! |
Thank you @colmanhumphrey for your investigation. Patching things in |
Everything the same for me. The reproduction steps are really weird - when I click on second input first and then to the Select, it works. But when it's focused on the first input and then clicking the Select crashes. But I can't find any connection between these things. I thought there is something about focus/blur, but there is no any special behavior regarding that in these inputs. I confirm that adding check on
|
Agreed. In fact for now I just pasted the entire file into our site and edited it there. Not ideal, but slightly nicer than editing within |
Just tried the latest version after the popper update (#1853):
My sense is that this issue isn't quite solved just yet, but I'm not sure |
I have this problem with the updated package. For me, to reproduce the problem:
I'm using: |
@thiagogrugel, do you have a reproducible sandbox? I am unable to reproduce this in our storybook using a similar setup to what you describe: CleanShot.2023-05-30.at.16.52.14.mp4 |
I am facing this problem and i managed to reproduce. https://codesandbox.io/s/radix-select-ref-error-9s366j Step 1: Select one of the last items It looks like the event occurs at the same time as formik's onBlur |
I've gone ahead and raised a PR: #2623 I haven't combed through the code to make sure it's a perfect solution, but it definitely fixes the crash, and the surrounding logic looks correct, so I think it's worth having. |
Just so it doesn't get lost: @pawelshopstory provided this reproduction in #2535, which is the simplest so far - all it requires is |
Bug report
Current Behavior
After rendering a select near the top of the screen, on first open I'm getting
TypeError: Cannot read properties of undefined (reading 'ref')
on Chrome,items[0] is undefined
on Firefox. This is coming from:primitives/packages/react/select/src/Select.tsx
Line 594 in f0a7495
And no surprise, but only when I use the
ScrollUpButton
: if I remove that, no more errors.If I just refresh the page, now everything works again, and I can use the select.
Note that this only happens when I generate a component that holds the select menu using a button.
Expected behavior
There's no behaviour lacking (just the same behaviour as when I hit refresh), just want to avoid the error.
Reproducible example
Sadly I actually could not reproduce this. I copied as much as I could, and it looks something like https://stackblitz.com/edit/test-radix-select?file=pages/index.js (but this example works...).
Here's a demo of this example of the action I'm taking. In our site, at the point where I open the menu, the undefined ref error appears:
CleanShot.2022-11-18.at.01.27.16.mp4
You'll see in the example code I have a bunch of forwarded refs, which I thought might be the solution, but it doesn't seem to make a difference. I can try and recreate our env more closely, but I'm not sure of the issue basically.
Suggested solution
One possibility is maybe to make the comparison at
primitives/packages/react/select/src/Select.tsx
Line 594 in f0a7495
Additional context
I realise this is a frustrating one to help with without a reproducible example. I would however be glad to try any debugging you can recommend instead too.
Your environment
The text was updated successfully, but these errors were encountered: