Can I allow a Drop to scroll offscreen?

Expected Behavior

If I’m using a Drop on a page that scrolls, and the target is positioned in a way that would mean the Drop’s natural layout wouldn’t fit in the viewport (and it is unable to flip), I would expect the Drop to scroll with the target and be cut off by the viewport

Actual Behavior

The Drop gets “squished” by max-height in an attempt to stay visible. Browsing the docs, it’s not clear whether this is the intended behavior, and/or if there’s a way to prevent/opt out of it. It appears to be a side-effect of the placement code.

URL, screen shot, or Codepen exhibiting the issue

This Codesandbox shows the behavior. When it is scrolled the Drop attempts to remain onscreen, and I’d like it to retain its layout and simply scroll off the screen

Steps to Reproduce

1. In Codesandbox, scroll down
2. Notice image is distorted because the maxHeight of the Drop is changing, despite the Box having its height and width set.

Your Environment

• Grommet version: 2.19.1
• Browser Name and version: Reproduced in Chrome 95 and Firefox 94, expected to repro across browsers
• Operating System and version (desktop or mobile): Mac OS 10.14

[chriszamierowski]

Interesting. Looks good to me as well, thanks!

[jcfilben]

Going to go ahead and mark this as a bug. It doesn’t feel like the Drop should be squishing content like that.

Just an extra note to help narrow down the issue, content isn’t getting squished when the text isn’t dynamic (see this codesandbox example). Seems related to how Drop is calculating it’s height when height is flexible like for an image or dynamically rendered text.