Color Presets: Unexpected scroll to color presets when selecting a style variation

[andrewserong]

Description

Related to #61213 and possibly introduced in #61334

While testing the new color presets in trunk, I noticed that if you select one of the color presets and then go to select a style variation, the first time you click the style variation, the site editor's browse mode side bar unexpectedly scrolls down to the already selected color preset.

Step-by-step reproduction instructions

1. Open the site editor
2. In the left hand sidebar of the browse mode, navigate to Styles
3. Scroll down and select one of the color presets
4. Then, scroll up and click on one of the style variations
5. Notice that the sidebar scrolls down to the already selected color preset, instead of focus being placed on the style variation that the user clicked on
6. If you then attempt to click on the style variation a second time, it works as expected

Screenshots, screen recording, code snippet

2024-05-21.18.44.54.mp4

Environment info

• WP 6.5.3
• Gutenberg trunk
• macOS
• Google Chrome

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[amitraj2203]

Hi @andrewserong, I think the bug mentioned in the issue is fixed in this PR. I also tried to replicate it but couldn't. Let me know if I'm missing anything.

[andrewserong]

Thanks @amitraj2203, but after re-testing trunk after #61617, this issue still appears to be present:

2024-05-27.14.49.52.mp4

In case it helps, I found it easier to reproduce on a smaller window size, e.g. a 13" laptop screen, where the Styles sidebar scrolls quite a long way. On larger screen sizes where both the style variations and color palettes are visible at the same time, the scroll issue doesn't appear to occur (I suspect because the elements are all visible?), so it's just when the other components aren't visible where the unexpected scroll seems to be happening.

[richtabor]

I'm pretty sure this existed before #61334. Let's target a fix for 6.6.

[Sourav61]

Hey @andrewserong, I tested the above issue and can reproduce this issue But I wanted to confirm whether the scroll on changing the style variation is expected or not.

I think that updating the style variation should automatically scroll to the colour palette associated as the next step so that we can confirm the colour palette and typography to be used

I will be working on the fix for the focus not being placed correctly on the style variation that the user clicked on.

[andrewserong]

Thanks for the ping!

But I wanted to confirm whether the scroll on changing the style variation is expected or not.

I believe the scroll is unexpected. In this case we can't know whether a user wishes to continue toggling through the style variations, so to me it would be unexpected to be scrolled immediately to another part of the UI as these screens aren't explicitly step based.

[scruffian]

I can no longer reproduce this, can you @andrewserong ?

[andrewserong]

Thanks for the ping! I can still reproduce this @scruffian. It can be a little tricky to reproduce if your theme only has a couple of presets as the issue only occurs when there's enough style variations and palettes that the buttons are out of view. To reproduce / emulate a theme that has a lot of presets, I've reduced my browser window down so that it's very short. I'm testing on Chrome on macOS. Here's how it's looking for me:

Gutenberg trunk

2024-07-10.10.12.34.mp4

WP 6.6 RC 3 (without Gutenberg)

2024-07-10.10.11.57.mp4

In the above screengrabs, I select a style variation, then click the color palette and then it snaps back up to the style variation. But it also happens the other way around for me if I select a color palette first and then go to select a variation, it'll snap down to the color palette.

[ramonjd]

I can confirm that it still occurs.

It's weird - almost as if the currently-focussed element doesn't like focus being taken. I have to click twice to "force" it.

Kapture.2024-10-02.at.16.28.26.mp4

I removed all the focus-related props on the variations and it didn't change much.

[ramonjd]

Note: it's not occurring in Firefox for me.

Maybe related to: https://issues.chromium.org/issues/40846304

[carolinan]

Same, can reproduce in Chrome but not Firefox.

Copying this over from the TT5 isssue:

I can reproduce this.
Windows 11, chrome, 6.7-beta3-59248, with or without Gutenberg.

I select a style variation at the top of the list for example "Noon".
Then I scroll down to the bottom. Now, "Noon" is no longer visible in the list of theme theme style variations.
I click on the color palette called "Sunrise".
The color palette is not selected. Instead, when I click on the palette, it seems focus is only moved to the "Noon" theme variation.
Clicking on the color palette a second time applies the palette.

style-selection-october-18.mp4