Filter Products by Attribute block in dropdown mode has zIndex issues

[tomasztunik]

Describe the bug

When Filter Products by Attribute block is used in dropdown mode and dropdown is open it is on to low rendering layer (zIndex) and will be overlap by other elements.

Noticed conflicted elements are:

• All Products block placeholder/loading state
• "Sale" badge on product grid

To reproduce

Steps to reproduce the behavior:

1. Create new page with Filter Products by Attribute and All Products block right under
2. Configure Filter block to use Dropdown display style and show Colour attribute (if using sample products)
3. Have products on sale in first row
4. Visit page and focus on field to see dropdown

• All Products block Placeholder elements are on top of the dropdown
• Sale badge is on top of the dropdown

Expected behavior

• The dropdown is above the mentioned elements

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

WordPress (please complete the following information):

• Core version: 5.9
• WooCommerce version: 6.1.1
• WooCommerce Blocks version: 6.9.0

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.