Automattic / themes

Free WordPress themes made by Automattic for WordPress.org and WordPress.com.
https://themeshaper.com
GNU General Public License v2.0
890 stars 354 forks source link

The product option selector drop-down list doesn't always work for the Tsubaki theme #7788

Open paulopmt1 opened 5 months ago

paulopmt1 commented 5 months ago

Quick summary

The user can’t select a product option if they click in a specific area of the drop-down list:

image

Steps to reproduce

https://github.com/Automattic/themes/assets/1044309/2c6e5e73-21fd-42d8-a13e-67b2f7bee0c8

What you expected to happen

To work when clicking on any area of the drop-down list.

What actually happened

It does not always works if we click on a specific point:

imagework

Browser

Google Chrome/Chromium, Mozilla Firefox, Microsoft Edge, Apple Safari

Context

Customer report

Platform (Simple, Atomic, or both?)

No response

Other notes

No response

Reproducibility

Consistent

Severity

None

Available workarounds?

Yes, easy to implement

Workaround details

We have a few options:

dsas commented 5 months ago

Slack discussion: p1714588279657929-slack-C029FM1EH

I wonder if this is related to https://github.com/Automattic/theme-tsubaki/commit/03418f94995c2edb5aaf4faa4a94f066ff2416c4 🤔 CC @xristos3490

xristos3490 commented 4 months ago

This seems like a bug in the styling wrapper of this select element, but the solution isn't straightforward.

The wrapper is an attempt to make more aesthetically pleasing select elements, but it comes with this limitation. In order to fix this, we need to adjust the z-index of the arrow, which would require resetting the background color of the select element.

Meaning from this: Screenshot 2024-05-13 at 4 40 09 PM

To this: Screenshot 2024-05-13 at 4 39 40 PM

Which, again, isn't ideal.

Given the environment we are working on, I would suggest we:

Both are low priorities and can be interim solutions until styling over these elements can be more granularly controlled.

What do you think? 🤔 cc @PanosSynetos