mui
Select with dynamic items fails to show popup upon update
Bug report
Current behavior
I have a setup where the items in one select depend on the value of another. After changing the first select's value, the dependent select updates, but its popup won't show again. In Chrome DevTools, I can see that the popup is rendered in the DOM, but it's not visible in the viewport. It seems like the styles aren't being recalculated after the change.
Expected behavior
After changing the value of the first select, the dependent select should update its items and the popup should appear correctly.
Reproducible example
Base UI version
v1.0.0-alpha.8
Which browser are you using?
Chrome
Which OS are you using?
Mac OS
After changing the value of the first select, the dependent select should update its items and the popup should appear correctly
@beeirl Do you mean open the 2nd select automatically once the 1st one is filled? You need to control the open state of the 2nd state to do this: https://codesandbox.io/p/sandbox/blissful-fire-cgqdzp
Another thing is you should use null instead of an empty string to clear the Select
@mj12albert no, I don't want it to open automatically. I can't open the second select anymore after the value of the first select changes.
Edit: if you keep changing the value of the first Select in my CodeSandbox and try to click on the second one you'll notice that the popup of the second one won't open again! Resetting the value of the second one using null instead doesn't make a difference.
@beeirl In that case, I think it's just an issue of clearing the 1st one with null instead of '': https://codesandbox.io/p/sandbox/blissful-fire-cgqdzp
@mj12albert try changing the first one without selecting a value in the second one. after you change the value of the first one at least twice, the second one won't open anymore.
The top value is just completely wrong after changing it twice it seems.
- Adding
key={selectedCountry}toSelect.Positionerfixes it though since it forces it to re-mount and perform the calculations anew. alignItemToTrigger={false}onSelect.Rootwill work in all cases since it uses a different positioning technique which doesn't have the issue
@atomiks this completely aligns with what I've been seeing. Will use alignItemToTrigger={false} in the meantime. Adding a key to the positioner is a good workaround though. Thanks for chiming in!
Tested the fix and it works now ~ https://codesandbox.io/p/devbox/happy-cannon-jxw2zk