Skip to content

Fix resize loop issue #8164

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix resize loop issue #8164

wants to merge 2 commits into from

Conversation

OliverJAsh
Copy link

@OliverJAsh OliverJAsh commented Apr 29, 2025

Closes #7017

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Open the story and verify #7017 no longer reproduces.

🧢 Your Project:

Unsplash

<PopoverRightExampleContent />
</Popover>
</MenuTrigger>
);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This story is more of a test, to reproduce the issue before the fix and to verify it works correctly after the fix. Is there a better place to do that? If not, what should I name it? I wanted to write a unit test, but I'm not sure how to write it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's fine to have a storybook example for something like this, it's really hard to reproduce in a unit test

one option could be to use storybook's "play" feature and see if you can use that to automate what should happen

@OliverJAsh OliverJAsh marked this pull request as ready for review April 29, 2025 20:47
Comment on lines +453 to +460
export const PopoverRightExample = () => (
<MenuTrigger>
<Button style={{marginLeft: 'auto'}}>Open popover</Button>
<Popover placement="bottom end">
<PopoverRightExampleContent />
</Popover>
</MenuTrigger>
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some examples around the code base of how to add a description to the story so we know how to test it in the future. You may need to adjust the code sample I wrote below.

Suggested change
export const PopoverRightExample = () => (
<MenuTrigger>
<Button style={{marginLeft: 'auto'}}>Open popover</Button>
<Popover placement="bottom end">
<PopoverRightExampleContent />
</Popover>
</MenuTrigger>
);
export const PopoverRightExample = {
render: () => (
<MenuTrigger>
<Button style={{marginLeft: 'auto'}}>Open popover</Button>
<Popover placement="bottom end">
<PopoverRightExampleContent />
</Popover>
</MenuTrigger>
),
parameters: {description: 'how to test this story, what does it do?'},
name: 'more descriptive name?'
};

@snowystinger
Copy link
Member

I tried out the story, I'm unable to reproduce the warning either with or without the fix. The one thing I do notice is that the popover used to resize several time as the text reflowed, now it appears to snap to the correct width immediately, so that seems to be an improvement. We'll need to run chromatic for this as well to make sure it didn't inadvertently change anything. And we'll need to test a bunch of other popovers.

I have a vague recollection that we tried this fix a while ago and something unexpected happened. If I have time, I'll try to see if I can dig anything up. Might've been something with submenu's or tooltips blocking background content.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tooltip causing ResizeObserver issue
2 participants