search

SteffeyDev / react-native-popover-view

A well-tested, adaptable, lightweight <Popover> component for react-native
MIT License
613 stars 92 forks source link

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

Open DominickVale opened 2 years ago

DominickVale commented 2 years ago

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:

Screenshots

https://user-images.githubusercontent.com/52491108/181597675-9877bb1f-8386-4399-964a-26b14141cc6d.mp4

SteffeyDev commented 2 years ago

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

DominickVale commented 2 years ago

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

SteffeyDev commented 2 years ago

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 commented 2 years ago

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