Skip to content

docs(v0 migration): add note about nested popups #28480

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.

Sign up for GitHub

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

Merged
layershifter merged 1 commit into from
Jul 11, 2023
Merged

docs(v0 migration): add note about nested popups #28480

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,6 @@ See [Migrate positioning props](?path=/docs/concepts-migrating-from-v0-positioni

Here's a [codesandbox](https://codesandbox.io/s/popup-migration-ccodmt?file=/example.js) comparing v0 Popup and v9 Popover.

---

## Migrate content and contentRef

`contentRef` can be replaced by React ref on `PopoverSurface`.
Expand Down Expand Up @@ -126,3 +124,23 @@ export const useStyles = makeStyles({
```

⚠️ **If this is your first time migrating style overrides**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page).

### Nested popups

If you have nested popups, and migrate to v9 inner popup first, you might have a problem with handling of `Escape` key.

To prevent this problem you can use `onKeyDown` prop on `PopoverSurface` to prevent `Escape` key from bubbling up to the outer popup.

```tsx
<PopoverSurface
onKeyDown={e => {
if (e.key === 'Escape') {
e.stopPropagation();
}
}}
/>
```

You can check out [this codesandbox](https://codesandbox.io/s/goofy-snowflake-gjjq8f?file=/example.tsx:424-543) for an example.

> Note: this workaround is not needed if you migrate outer popup first or if you migrate both popups at the same time.