Wp-calypso: Editor: link modal & media modal keep scrolling up to the top

[folletto]

When the media modal opens, the page gets scrolled up to the top.

To Reproduce

1. Open the Editor
2. Have a long post, so it's scrolled down
3. Insert an image, or do any operation opening the media modal while scrolled down (edit).

The page will scroll up as soon as the media modal opens.

I ranked this "High priority" as it's a very frustrating disruption for anyone writing a post with images.

[designsimply]

Tested and confirmed that when I am editing at the end of a long post that requires scrolling and I insert an image I am scrolled up to the top and the image is out of view.

Video: 20s
^{Seen at https://wordpress.com/post/design5279.wordpress.com/11374 using Firefox 54.0.1 on Mac OS X 10.12.6.}

[designsimply]

Could this be related to #16245?

[alisterscott]

Confirmed this issue and I can confirm it's recent since the WordPress.com desktop app doesn't contain this bug. I think we should keep the [Pri] High label

[KokkieH]

Also reported in #16741

This happens with the Insert Link modal as well, not just media.

[KokkieH]

Several user reports in the other issue. Adding 872899-f for follow-up.

[rachelmcr]

Could this be a side effect of the work that was done in https://github.com/Automattic/wp-calypso/pull/15718 to make dialogs (modals like these) scrollable in smaller windows? cc @jameskoster

[bisko]

Could this be a side effect of the work that was done in #15718 to make dialogs (modals like these) scrollable in smaller windows? cc @jameskoster

Reverting the changes from the the PR locally fix the issue.

[spen]

At a quick glance I don't see any changes in #15718 that would cause a change in position other than the updated react-modal version - That'd be worth exploring.

[SiobhyB]

This was also reported in 618738-zen and I was able to replicate by inserting a link at the bottom of the page editor in the latest version of Chrome/macOS Sierra.

[jameskoster]

Sorry for the late reply, I've been afk. Looks like this is causing the issue.

That style was added so that the content _behind_ the dialog doesn't scroll when the dialog itself is visible.

However, that class is added intermittently. Even in the latest version of react-modal.

For now, the safest/quickest solution would be to simply remove that style.

[mmtr]

Reopening this issue since it is still present.