Checkout: Opening multiple dropdown variant pickers leads to a congested experience

[jjchrisdiehl]

Quick summary

This may just be down to style or taste, but I feel like having multiple variant pickers active at the same time feels a bit congested, especially on mobile devices:

Desktop:

Mobile:

Proposed Solution

We could consider creating an 'active' state for the available variant pickers in a section, then close any pickers that aren't the customer's focus.

Steps to reproduce

• Add a plan and domain (or another product) to cart
• Go to checkout
• Interact with the variant pickers for the products
• Adjust the window width for mobile experience

What you expected to happen

I expect the active picker to be shown and all other pickers to be collapsed.

What actually happened

All pickers maintain their own state and open/close regardless of the focus of the customer.

Impact

All

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

No response

Logs or notes

No response

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Simple – Uncertain (see comment)

📌 FINDINGS/SCREENSHOTS/VIDEO

https://github.com/Automattic/wp-calypso/assets/14153300/02b6521f-2ebe-41c2-96bf-1261ff6c4013

📌 ACTIONS

• Triaged

📌 Message to Author @jjchrisdiehl I could not replicate a state where both pickers are open at the same time on Chrome, but since you already added it to Shilling's board, I'm going to consider this triaged from our end

[jjchrisdiehl]

Hmm interesting, so this may only be an issue on my local Calypso environment - doesn't appear to have this behavior in production. I'll dig into it a bit more to see what the difference is 🤔

[michaeldcain]

This is a somewhat minor Checkout enhancement. Moving to the backlog.