react-popper icon indicating copy to clipboard operation
react-popper copied to clipboard

Published 20 hours ago • verified publisher icon floating-ui

adaptive positioning with usePopper vertical position failing in certain circumstances

Open vincerubinetti opened this issue 5 years ago • 3 comments
trafficstars

Reproduction demo

test.zip

Run yarn install && yarn start

What went wrong?

oR8QhEri51

I'm trying to make a gallery of images in buttons that shows a larger version of the image on hover. I'm running into these strange issues when using placement: 'top'. The tooltip shows fine when it is below the but not when it is above.

Trying changing placement, commenting in/out <Svg/> zooming in/out, scrolling. I can't narrow down exactly what is causing the problem, but it happens frequently, and in all browsers.

Packages versions

"@popperjs/core": "^2.4.4",
"react-popper": "^2.2.3",

vincerubinetti avatar Aug 16 '20 16:08 vincerubinetti

It seems that this fixes it:

modifiers: [
      {
        name: 'computeStyles',
        options: {
          adaptive: false, // true by default
        },
      },
    ]

IMPORTANT EDIT

Also make sure you have <!DOCTYPE html> at the top of your pages as per this FAQ. I don't know if I missed this, or just ignored it because I couldn't see how that could possibly be the problem. But adding this actually let me avoid having to do the above options.

vincerubinetti avatar Aug 16 '20 16:08 vincerubinetti

Possibly related to this issue on the popperjs core, except that I'm not even using position: relative.

vincerubinetti avatar Aug 16 '20 16:08 vincerubinetti

Not sure if the same issue, but most likely it is.

I am using a rather complex combination but it seems it is a superset of what you have. I included some debug hints, so you may try those ...

What I have is

  • React Tippy in headless mode with inlinePositioning plugin (Tippy is based on Popper)
  • Default positioning: top
  • Popper element rendered to document.body
  • flip modifier with fallbackPlacements: ['top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
  • preventOverflow modifier with mainAxis: false, altAxis: true
  • offset modifier with dynamic offset calculation

What happens to me is that until the flip modifier kicks in, everything is OK

image

But once the flip modifier triggers the simulation of the alternative positions, it throws the popper element beyond the fold. Thanks to offset and some negative margins I can see it misplaced. Yours may be just below the fold ...

image

When I disable adaptive mode, it works OK and properly flips

image

After an agonizing debug session, I narrowed it down to a point where I found out that the popper element has both top: 0 and bottom: 0 set at the same time, making its height the window height instead of my default height and further calculating offsets with it

image

Upon further debugging, I found out that the initialStyles of the applyStyles modifier write top position but don't reset bottom getting the wrapper element into this situation. It seems that it is not aware of the historical styles applied by the flip modifier, or the flip modifier doesn't reset the complete state.

image

Hopefully someone with proper knowledge will pick this information up, and try to find a proper fix for it.

hejtmii avatar Nov 09 '20 12:11 hejtmii

@FezVrasta for me also not working, do you have any update?

only strategy: fixed fixing it

happylolonly avatar Jul 11 '23 13:07 happylolonly

@vincerubinetti why you closed? how you fixed?

happylolonly avatar Jul 11 '23 14:07 happylolonly

Per my comment above, doctype fixes it. More of a strange consequence of browser quirks mode.

However, @hejtmii may want to keep this open for his more specific problem?

vincerubinetti avatar Jul 11 '23 14:07 vincerubinetti

Screenshot 2023-07-11 at 18 14 11 image

happylolonly avatar Jul 11 '23 14:07 happylolonly

Okay just going to reopen for @hejtmii's situation. @happylolonly you probably need to upload a minimal reproduction for yours so they can fix it.

vincerubinetti avatar Jul 11 '23 14:07 vincerubinetti

ok, I can do it little bit later, @FezVrasta do you need more info and possibilities to fix? I see you have new lib

happylolonly avatar Jul 11 '23 14:07 happylolonly

👋 the library is in low maintenance mode, everyone should move to Floating UI and its React bindings.

https://github.com/floating-ui/react-popper#%EF%B8%8F-this-library-is-in-maintenance-mode

I don't plan to release additional versions unless they are meant to fix vulnerabilities. Hopefully that makes sense.

FezVrasta avatar Jul 11 '23 15:07 FezVrasta