feat: added portalName, timeoutLength and ...rest props
#1
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Added `portalName` to customize the `PortalHost` where popup content is placed. - Added `timeoutLength` to customize the delay when measuring popup content. - Pass `...rest` props to the `View` wrapping popup content.
soulfresh
commented
Jul 28, 2022
| height, | ||
| }); | ||
| }); | ||
| const timer = setTimeout(() => { |
There was a problem hiding this comment.
Despite adding this timeout, there are still some layout issues with the popover content. When opening the popup, it will jump around until it has finished calculating the optimal dimensions for the content. A bigger fix for that might be rendering the content transparently in the center of the screen and then placing/showing it after the content size is known.
- Fixed an issue where the anchorRef.current value is undefined in timeouts despite wrapping the timeout in an anchorRef.current check.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What does this PR do?
portalNameto customize thePortalHostwhere popup content isplaced.
timeoutLengthto customize the delay when measuring popup content....restprops to theViewwrapping popup content.portalNameI ran into an issue where using
Popupin a React NativeModal, covered the popup content. In order to work around that issue, I added a namedPortalHostto my modal and passed that name through thePopupcomponent.timeoutLengthI was running into issues wher the popup content was sometimes positioning itself at 0, 0. The root issue was that the initial layout measurements were happening before the content was rendered. To solve this I wrapped that initial
measureWindowrequest in a timeout similar to the existing timeout used with theDimensionsevent listener. I further allowed customizing the timeout for all 3measureWindowrequests....restFor accessibility on web, I wanted to combine Downshift.js with
Popup. However, Downshift (and accessibility patterns on web), require Select, Tooltip, etc. contents to always be accessible in the DOM. I was mostly able to work around that by controlling theoverlayprop. However, I also needed to configure thepointerEventsprop of the popup content so it would not block interactions below it. To resolve this, I apply any additional props to theViewcomponent wrapping the user's popup content.I know this is a lot of changes for a single PR but I figured it would be easier for us both to handle everything in one PR rather than multiple. Let me know if you want me to break any of these changes out or remove any of them entirely.