Polaris-react: Popover with form components causes undesired scrolling

[E-Mud]

Issue summary

Typing in an input inside a Popover causes the browser to scroll to the bottom of the page, and therefore forcing the popover to hide.

We were only able to reproduce this in Safari, but not only in our app but also in the Polaris examples page. Here you can see a video of the issue. Safari automatically scrolls to the input you are typing if it's "out of view" but in this case it seems that the Popover position is not correctly calculated.

Expected behavior

Typing in an input inside a Popover doesn't cause any scrolling. Open popover are never "out of view" so they shouldn't trigger any scroll.

Actual behavior

Browser scrolls to the bottom of the page when you type in an input inside a Popover, forcing the Popover to hide.

Steps to reproduce the problem

(As in the example video from above)

1. Navigate to Popover examples page and open Popover with form components example
2. Click on Filter button
3. Click on text box next to Tags
4. Type a

Specifications

• Are you using the React components? (Y/N): Yes
• Polaris version number: 2.1.2
• Browser: Safari v11.1.1
• Device: MacBook Pro
• Operating System: OS X v10.13.5

EDIT: Added correct link to video

[E-Mud]

If you can provide us with a workaround in the meantime it would very helpful. I already tried preventDefault in the keyup/keydown/keypress event coming from the input but it didn't work.

[kaelig]

@E-Mud Thanks for reporting this! Can you share the correct link to the video?

[E-Mud]

@kaelig Oops!

Sorry I forgot to add the correct link: video

[ItsJonQ]

Took a looksy 👀 .

I was able to replicate this in Safari on the Polaris documentation site:
https://polaris.shopify.com/components/overlays/popover

However… I wasn't able to replicated it in the local Polaris dev Playground (also on Safari).

It works fine in Chrome and Firefox though 🤔 (both Polaris documentation + local Playground)

Hope this helps!

---

Device:

• Mac OS 10.12.6

[E-Mud]

A couple more things that might be helpful:

• I couldn't reproduce it with fixed={true} on version 2.2.0
• We built our own popover with the same basic functionality. The key difference is that ours doesn't have any animation for opening. Could the animation be the cause?

[ry5n]

I can reproduce with the latest release (2.3.0) both inside and outside of the Polaris site. I’ve opened an issue in our internal tracker and we’ll look into this as soon as possible.

[mbaumbach]

This may be related, or perhaps intentional, but the popover also disappears when there's not enough space in the window:

The code to reproduce that is a simple Popover with a ColorPicker in it (See sandbox) You can also get it into a state where it seems like the Popover doesn't open at all if you make the window smaller.

This all sounded similar to this bug, but if it's different, I can open a different issue.

[solonaarmstrong-zz]

@mbaumbach Thank for bringing that to our attention. We're looking into it.

[solonaarmstrong-zz]

@ItsJonQ If there is not enough content to scroll the page, the issue doesn't present itself. Popover uses portal, which is positioned as a sibling element to the rest of the content and Safari scrolls to it if you type in a text input within the popover.

Add something like this below your popover in the playground and you'll see the issue.

{Array.from({length: 40}).map(() => (
  <p>Content so the page scrolls</p>
))}

[solonaarmstrong-zz]

@mbaumbach I'm looking into a default behaviour for this that doesn't cause the bug. You can also use preferredPosition="above" for a popover that appears at the bottom of the page.

[mbaumbach]

@solonaarmstrong Thanks for looking into it. We have a somewhat tall popover in our production app with a ColorPicker in it, hex textfield, and recent color swatch (Screenshot below). We run into this issue regardless of the preferredPosition as some of our customers have some pretty small resolutions apparently! Probably could argue we find a way to make this smaller using a different design, but thought I'd share our real world example. 😀

[solonaarmstrong-zz]

Both of these bugs are no longer reproducible and may have been fixed with the latest Safari update. Closing and will reopen if it resurfaces.

[mbaumbach]

@solonaarmstrong The sandbox I posted in the above comment is still reproducible in Chrome, Safari, and Firefox for me. Perhaps that's a different issue though, so let me know if you'd like me to open a different issue for that!

[dpersing]

Hi @mbaumbach,

Please go ahead and open a separate issue, since the original issue with typing input and Safari has been fixed by a Safari update. Thanks!

[mbaumbach]

Thanks @dpersing, I've opened #435!