Skip to content
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

MeasureContent/handleChange doesn't get called in some cases, resulting in overflow #143

Open
DominickVale opened this issue Jul 28, 2022 · 4 comments
Labels

Comments

@DominickVale
Copy link

Describe the bug
As title and video show, after recalculating the dimensions once it doesn't do it anymore... At first i thought it had some sort of maxHeight, but then i noticed that if the popover is opened with all 3 switches toggled and expanded, the height is calculated just fine, and i can even toggle them on and off without it overflowing...

Device/Setup Info:

  • Emulator Pixel 4
  • OS: Android 12
  • react-native version: 0.66.3
  • react-native-popover-view version: 5.0.0

Screenshots

output.mp4
@SteffeyDev
Copy link
Owner

@DominickVale Thanks for reporting. I'm not able to see the video, can you try re-uploading?

@DominickVale
Copy link
Author

Reuploaded on youtube. https://youtu.be/ZHqyWNCVZ1w

@SteffeyDev
Copy link
Owner

Interesting, a dump of the full logs would be helpful. It looks like it is not overflowing the display area, even when it goes off the screen. The popoverOrigin is (10, 10), whereas if it were off the screen, I would expect the y-coordinate of the origin to be a negative number. Do you set anything custom for the display area?

@DominickVale
Copy link
Author

You're right, sorry, i should've included it in the first place along with the code:

// styles
const popOverModalStyles = {
  popOver: {
    backgroundColor: theme.colors.elevation.level4,
    borderColor: theme.colors.outline,
    borderBottomColor: theme.colors.outline,
    borderWidth: 1,
    borderRadius: 12,
  },
  arrowStyle: {
    width: 0,
    height: 0,
  },
  scrollStyle: {
    padding: 16,
  },
}
// wrapper
export const PopoverSettings: React.FC<PopoverSettingsProps> = (props) => {
  const { children, minWidth, ...popoverProps } = props

  return (
    <Popover
      arrowSize={popOverModalStyles.arrowStyle}
      popoverStyle={{ ...popOverModalStyles.popOver, minWidth }}
      {...popoverProps}>
      <ScrollView style={popOverModalStyles.scrollStyle} showsVerticalScrollIndicator={false}>
        <InnerPopoverContainer>{children}</InnerPopoverContainer>
      </ScrollView>
    </Popover>
  )
}
// usage
            <PopoverSettings
              isVisible={isVisible}
              minWidth={Dimensions.get('screen').width * 0.6}
              debug
              from={<SmallButton />}>
              <>
                <Text>Play at random intervals</Text>
                {random && (
                  <TimeRandomWheel />
                )}
                <HorizontalMultiSliderOption />
				<HorizontalMultiSliderOption />
				<HorizontalMultiSliderOption />
				//...

The horizontalMultiSliders expand via conditional rendering of the children
Rendered channel: 0 means the parent component of the popover rerendered

// just opened menu

 LOG  Rendered channel:  0
 LOG  [2022-09-08T08:17:06.729Z] calculateRectFromRef - waiting for ref
 LOG  [2022-09-08T08:17:06.729Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":0,"width":0,"height":0}
 LOG  Rendered channel:  0
 LOG  [2022-09-08T08:17:06.956Z] calculateRectFromRef - calculated Rect: {"x":28,"y":416,"width":88,"height":33.818180084228516}
 LOG  [2022-09-08T08:17:07.058Z] setDefaultDisplayArea - newDisplayArea: {"x":0,"y":-0.000055486505743829184,"width":392.7272644042969,"height":789.0908813476562}
 LOG  [2022-09-08T08:17:07.059Z] setDefaultDisplayArea - displayAreaOffset: {"x":0,"y":0}
 LOG  [2022-09-08T08:17:07.078Z] [BasePopover] componentDidUpdate - changedProps: ["displayArea"]
 LOG  [2022-09-08T08:17:07.079Z] componentDidUpdate - isVisible not changed, handling other changes
 LOG  [2022-09-08T08:17:07.079Z] handleChange - no requestedContentSize, exiting...
 LOG  [2022-09-08T08:17:07.080Z] calculateRectFromRef - waiting for ref
 LOG  [2022-09-08T08:17:07.080Z] calculateRectFromRef - waiting for ref to move from: {"x":28,"y":416,"width":88,"height":33.818180084228516}
 LOG  Rendered channel:  0
 LOG  [2022-09-08T08:17:07.270Z] measureContent - new requestedContentSize: {"width":235.63636779785156,"height":312.7272644042969} (used to be null)
 LOG  [2022-09-08T08:17:07.283Z] handleChange - waiting 100ms to accumulate all changes
 LOG  [2022-09-08T08:17:07.399Z] handleChange - requestedContentSize: {"width":235.63636779785156,"height":312.7272644042969}
 LOG  [2022-09-08T08:17:07.399Z] handleChange - displayArea: {"x":0,"y":-0.000055486505743829184,"width":392.7272644042969,"height":789.0908813476562}
 LOG  [2022-09-08T08:17:07.400Z] handleChange - fromRect: {"x":28,"y":416,"width":88,"height":33.818180084228516}
 LOG  [2022-09-08T08:17:07.400Z] handleChange - placement: "auto"
 LOG  [2022-09-08T08:17:07.401Z] computeAutoGeometry - displayArea: {"x":0,"y":-0.000055486505743829184,"width":392.7272644042969,"height":789.0908813476562}
 LOG  [2022-09-08T08:17:07.401Z] computeAutoGeometry - fromRect: {"x":28,"y":416,"width":88,"height":33.818180084228516}
 LOG  [2022-09-08T08:17:07.402Z] computeAutoGeometry - List of available space: {"left":{"sizeAvailable":28,"sizeRequested":235.63636779785156,"fits":false,"extraSpace":-207.63636779785156},"right":{"sizeAvailable":276.7272644042969,"sizeRequested":235.63636779785156,"fits":true,"extraSpace":41.09089660644531},"top":{"sizeAvailable":416.00005548650574,"sizeRequested":312.7272644042969,"fits":true,"extraSpace":103.27279108220887},"bottom":{"sizeAvailable":339.272645776922,"sizeRequested":312.7272644042969,"fits":true,"extraSpace":26.545381372625116}}
 LOG  [2022-09-08T08:17:07.402Z] computeAutoGeometry - Found best postition for placement: "top"
 LOG  [2022-09-08T08:17:07.402Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":10,"y":103.27273559570312},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:07.403Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":10,"y":103.27273559570312},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:07.418Z] handleChange - animating in
 LOG  [2022-09-08T08:17:07.418Z] getTranslateOrigin - popoverSize: {"width":235.63636779785156,"height":312.7272644042969}
 LOG  [2022-09-08T08:17:07.419Z] getTranslateOrigin - anchorPoint: {"x":72,"y":416}
 LOG  [2022-09-08T08:17:07.419Z] animateIn - translateStart: {"x":-45.81818389892578,"y":1885.8181859796698}
 LOG  [2022-09-08T08:17:07.419Z] animateIn - translatePoint: {"x":10,"y":103.27273559570312}
 LOG  [2022-09-08T08:17:07.423Z] Setting up keyboard listeners
 LOG  Rendered channel:  0
 LOG  [2022-09-08T08:17:07.900Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":0,"y":-1626.1817626953125,"width":235.63636779785156,"height":312.7272644042969}
 LOG  [2022-09-08T08:17:07.901Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":62.181819915771484,"y":-1315.272705078125,"width":1.8181818723678589,"height":2.1818182468414307}

// enable volume randomization

 LOG  Rendered channel:  0
 LOG  Rendered channel:  0
 LOG  [2022-09-08T08:17:12.298Z] measureContent - new requestedContentSize: {"width":235.63636779785156,"height":372.7272644042969} (used to be {"width":235.63636779785156,"height":312.7272644042969})
 LOG  [2022-09-08T08:17:12.320Z] handleChange - waiting 100ms to accumulate all changes
 LOG  [2022-09-08T08:17:12.431Z] handleChange - requestedContentSize: {"width":235.63636779785156,"height":372.7272644042969}
 LOG  [2022-09-08T08:17:12.431Z] handleChange - displayArea: {"x":0,"y":-0.000055486505743829184,"width":392.7272644042969,"height":789.0908813476562}
 LOG  [2022-09-08T08:17:12.431Z] handleChange - fromRect: {"x":28,"y":416,"width":88,"height":33.818180084228516}
 LOG  [2022-09-08T08:17:12.432Z] handleChange - placement: "auto"
 LOG  [2022-09-08T08:17:12.432Z] computeAutoGeometry - Top/bottom tryping to keep same, geometry: {"popoverOrigin":{"x":10,"y":43.272735595703125},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:12.433Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":10,"y":43.272735595703125},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:12.433Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":10,"y":43.272735595703125},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:12.456Z] handleChange - Triggering popover move to: {"x":10,"y":43.272735595703125}

// enable pan randomization

 LOG  Rendered channel:  0
 LOG  Rendered channel:  0
 LOG  [2022-09-08T08:17:16.348Z] measureContent - new requestedContentSize: {"width":235.63636779785156,"height":405.81817626953125} (used to be {"width":235.63636779785156,"height":372.7272644042969})
 LOG  [2022-09-08T08:17:16.366Z] handleChange - waiting 100ms to accumulate all changes
 LOG  [2022-09-08T08:17:16.485Z] handleChange - requestedContentSize: {"width":235.63636779785156,"height":405.81817626953125}
 LOG  [2022-09-08T08:17:16.485Z] handleChange - displayArea: {"x":0,"y":-0.000055486505743829184,"width":392.7272644042969,"height":789.0908813476562}
 LOG  [2022-09-08T08:17:16.486Z] handleChange - fromRect: {"x":28,"y":416,"width":88,"height":33.818180084228516}
 LOG  [2022-09-08T08:17:16.486Z] handleChange - placement: "auto"
 LOG  [2022-09-08T08:17:16.487Z] computeAutoGeometry - Top/bottom tryping to keep same, geometry: {"popoverOrigin":{"x":10,"y":10.18182373046875},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:16.487Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":10,"y":10.18182373046875},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:16.487Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":10,"y":10.18182373046875},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:16.508Z] handleChange - Triggering popover move to: {"x":10,"y":10.18182373046875}

// disable pan randomization

 LOG  Rendered channel:  0
 LOG  Rendered channel:  0
 LOG  [2022-09-08T08:17:27.484Z] measureContent - new requestedContentSize: {"width":235.63636779785156,"height":372.7272644042969} (used to be {"width":235.63636779785156,"height":405.81817626953125})
 LOG  [2022-09-08T08:17:27.501Z] handleChange - waiting 100ms to accumulate all changes
 LOG  [2022-09-08T08:17:27.633Z] handleChange - requestedContentSize: {"width":235.63636779785156,"height":372.7272644042969}
 LOG  [2022-09-08T08:17:27.633Z] handleChange - displayArea: {"x":0,"y":-0.000055486505743829184,"width":392.7272644042969,"height":789.0908813476562}
 LOG  [2022-09-08T08:17:27.634Z] handleChange - fromRect: {"x":28,"y":416,"width":88,"height":33.818180084228516}
 LOG  [2022-09-08T08:17:27.634Z] handleChange - placement: "auto"
 LOG  [2022-09-08T08:17:27.634Z] computeAutoGeometry - Top/bottom tryping to keep same, geometry: {"popoverOrigin":{"x":10,"y":43.272735595703125},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:27.634Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":10,"y":43.272735595703125},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:27.634Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":10,"y":43.272735595703125},"anchorPoint":{"x":72,"y":416},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":406.00005548650574},"viewLargerThanDisplayArea":{"height":false,"width":false}}
 LOG  [2022-09-08T08:17:27.661Z] handleChange - Triggering popover move to: {"x":10,"y":43.272735595703125}

// clicking on the third randomization option doesn't produce any output like it's shown in the video

@SteffeyDev SteffeyDev added the bug label Sep 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants