This repository has been archived by the owner on Aug 21, 2023. It is now read-only.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem/Feature
We've started using Preact in Beacon Embed for lighter bundle size and better performance. It's in most part compatible with React, so a lot of things work the same. However, there apparently is one difference we've noticed.
If there is a Portal created from within another Portal, the rendering to the DOM is very "transactional", meaning that some intermediate states are not being flushed to the DOM. In our case the issue is with Animate component, and the fact that intermediate
entering
state is not rendered, but it goes straight to renderingentered
state. Because of that animations are not working - there is not change to the styles as seen from the DOM/browser perspective.I am not 100% sure what is the exact issue, it might be some combination of Animate, PortalWrapper and Modal. However, the solution I have found that is working is to delay a bit the rendering of the content of PortalWrapper, by adding additional state element, and setting it to
true
whenisOpen
is changed totrue
as well.I am not setting it back to
false
when modal is closed, because there seems to be some error related to this showing up in application, that I cannot locate the source for, but we don't need to change this flag at this point.I've put this behind a prop flag, so that it doesn't break any existing Modal usages outside of Beacon (and all Beacon Modals would be given this flag). That's mostly because that are some callback available on Modal that might rely on content to be rendered immediately.
Testing
This can be of course tested by opening storybook and making sure Modals are working correctly :)
However, proper testing of the issue cannot be really done in this repo, only when using Beacon :( We'll do this in separate PR.
Write to your heart's content, include:
Guidelines
Make sure the pull request:
proptypes
) Guidelines