Description
Provide a general summary of the issue here
When you place a ComboxBox inside of a Modal using Popover, the variable for --trigger-width
is incorrectly set.
🤔 Expected Behavior?
The --trigger-width
should always update to be the width of the trigger.
😯 Current Behavior
From my testing, it seems that it measures when the modal is triggered (and the input is one size). Then the modal finishes rendering contents and they are a different size. However, for some reason the resize observer is not fired.
If I breakpoint at the time this code is run, it is correctly identifying the inputs and their widths (although they are shorter). If I then let it play through, and check the widths of the inputs, they are larger. However, it has not triggered the resize.
https://github.com/adobe/react-spectrum/blob/403ec27bf8f5af6e19529b78782526f680c171ca/packages/react-aria-components/src/ComboBox.tsx#L153-L166C6
💁 Possible Solution
Not sure why the resize event isn't being fired.
I have seen some libraries accept a list of dependencies that should trigger recalculation. E.g. a prop that takes an array of references, and if any resize then it recalculates. That doesn't seem like it should be necessary though.
Update
After finding that it is because of the scale animation, maybe the ComboBox/Select could detect when inside a Modal/Dialog and update the width when the animation is finished (e.g. data-entering
).
Alternatively, the simplest option could just be to measure when it is triggered, so it is always up to date based on the current interaction.
🔦 Context
I am building a form in a Modal that needs to use a ComoBox
🖥️ Steps to Reproduce
https://codesandbox.io/s/react-typescript-forked-2ly428?file=/src/App.tsx
Apologies the styles are a bit yuck, I copied them from the docs.
- Click Signup...
- Click the menu or start typing
Version
1.0.0-beta.2
What browsers are you seeing the problem on?
Chrome
If other, please specify.
I also tried the nightly build and same issue
What operating system are you using?
MacOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response