Wp-calypso: People: Author selector longer than length of available authors

[arunsathiya]

Steps to reproduce

• Visit https://wordpress.com/people/team
• Click on an existing author
• Remove them from the team and while doing so, attribute their posts to another user

What is expected

The post attribution author selector dropdown has length equal to the number of available authors.

What happens instead

The author selector dropdown has extra, unwanted space below available authors.

The same author selector is fine on the Calypso post editor.

[arunsathiya]

Actually, giving it another look, looks to be an intentional change - https://github.com/Automattic/wp-calypso/pull/32665 cc @sixhours

But, the dropdown has unexpected extra space on all screen widths.

First is from desktop and second from mobile width.

This happens only for author selector on People management page https://wordpress.com/people/team It's fine on other locations like Calypso post editor.

[sixhours]

The extra whitespace is definitely not intentional! Good catch! I'll look into this.

[sixhours]

@arunsathiya I'm not able to reproduce the extra space on a test site in Chrome or Firefox for Mac. Is this happening in a particular browser/OS? Or perhaps on a specific test site?

[arunsathiya]

@sixhours I am able to consistently reproduce this on multiple sites.

• business.wpcom.arunsathiya.blog
• premium.wpcom.arunsathiya.blog
• personal.wpcom.arunsathiya.blog

I use Google Chrome Version 74.0.3729.131 (Official Build) (64-bit) and Firefox Quantum 66.0.5 (64-bit) on macOS 10.14.4 - Mac OS Mojave.

I have added you to all three sites as an admin to see if you are able to reproduce this. Feel free to tinker around with the sites.

[sixhours]

Thanks for the details! Odd, I'm using the same OS/browsers/versions but can't see the issue on those sites.

What size screen are you using? I'm on a fairly small screen so I wonder if there's something happening on large screens. And have you disabled all browser plugins/scripts to verify that's not a factor?

[arunsathiya]

I am on a 24 inch display, but I see this behaviour on a MacBook Pro 15 inch, 2016, and MacBook Air, 13 inch, 2015 as well. This is very strange because I am able to reproduce this on incognito/private windows as well without any extensions/plugins.

On the flip side, it works fine on Google Chrome for Android 9. Wonder if it's something with my browsers after all. No CSS in use, firm about it because I don't have any extensions activated on incognito.

Giving it a closer look, I see an inline style of height 126px. I have no clue where that comes from. 🤔

[sixhours]

"Fun". 😄

Giving it a closer look, I see an inline style of height 126px. I have no clue where that comes from.

Typically an inline style like that is added by the component with Javascript, probably coming from here in this case: https://github.com/Automattic/wp-calypso/blob/b0ec1d436b478158e8aa4416ef8f4d2044742033/client/components/infinite-list/scroll-helper.js

Some calculation is going wonky on your sites. :)

Is it happening when you log in as a different user? Maybe try roping a couple Happiness Engineers in, too, to see if it's happening on their test sites?

[arunsathiya]

Welp, I am seeing the same behaviour with an entirely different account on a different site. But, a new development!

I see the extra white space when the dev tools' closed, but when it's open the extra white space is not seen.

Indeed there's something strange with how the author-selector-infinite-scroller length is calculated.

Maybe try roping a couple Happiness Engineers in, too, to see if it's happening on their test sites?

Good idea! @Automattic/testing, is anyone able to reproduce the issue on the original report?

[alaczek]

I was able to replicate this as well -- it does seem to be related to screen resolution. I was able to see it on my external monitor, but not on my 13" macbook screen (I tested on automattic.design site - a site that has a lot of authors).

External monitor:

When I opened console and started scrolling up and down the list of authors, I also saw this JS error popping up a lot, to a point where my whole browser froze (although I'm not sure this is related)

I also tried this on my own sandbox site, which has only two users, and was able to replicate as well:

Sooo.... not closer to a solution, but at least I was able to replicate :)

[sixhours]

I'm finally able to reproduce this one by changing my resolution to something huge. I think it may be related to screen height. Going to continue investigating!

[sixhours]

I am also able to reproduce this in the Calypso post editor. I did this by forcing the selector's container to be very tall, so the selector appears closer to the bottom of the viewport:

This appears to be a bug related to how that selector calculates the pop-up position onscreen, not specific to the People Management area. The only reason we're finding it there is because the People Management uses this selector in an area close to the bottom of the viewport. Progress!

[sixhours]

Scratch that, it's not how the popover positioning is calculated; it's the InfiniteList component, which is calculating the wrong value for the height of .infinite-list__spacer. This is where that value gets set:

https://github.com/Automattic/wp-calypso/blob/b0ec1d436b478158e8aa4416ef8f4d2044742033/client/components/infinite-list/index.jsx#L378-L389

But I'm well into the weeds now and no idea how to fix something like this.

[danieldudzic]

Went a bit deeper into the weeds trying to figure this one out.

I have found the following piece of code:

https://github.com/Automattic/wp-calypso/blob/59bdfeeb97eda4266ad39410cb0a074d2c88dbc8/client/components/infinite-list/scroll-helper.js#L155-L158

I'm wondering if somehow this issue might be related to:

Container node is reported longer than it should be in mobile Safari 7.0

[donpark]

InfiniteList component has several severe issues, worst being it crashes while scrolling when there are too many items due to infinite update/render loop. I tried fixing it but it broke media chooser and had to be reverted. My current prognosis is that it needs to be rewritten/replaced as a whole.