Dropdown arrow for the ‘Sort by’ field is not selectable

Online Store and Theme Development
1

In the product search results page, the dropdown arrow for the ‘Sort by’ field is not selectable. Instead, the user needs to select either the text or white space in the Sort-by field for the dropdown to open.

It is expected that selecting the dropdown arrow for the ‘Sort by’ field would open the dropdown menu.

This can be reproduced as follows:

  1. Navigate to a collections page.
  2. Select the search CTA in the header (magnifying glass)
  3. Search for a term such as a collection name
  4. Hover the mouse over the dropdown arrow for the ‘Sort by:’ field
  5. Observe that the dropdown arrow is not selectable
  6. Move the mouse into the white space between the dropdown arrow and the ‘Relevance’ text
  7. Select the mouse
  8. Observe that the dropdown menu opens as expected.

We are using the Dawn theme, if that’s relevant.

Is there a way of editing one of the liquid files to fix this, e.g. main-collection-product-grid.liquid

2

Well, by default it seems it is visually outside of the select element.

For desktop views if you add something like this to your CSS:

.facet-filters__sort+.icon-caret {
  pointer-events: none;
  position: absolute;
  top: 8px;
}

It should put it within the bounds of the select element and allow you to click-through it.

You can add that to the Custom CSS section of the Theme Settings using the Theme Editor if you want.

1 Like
3

Hi Rob - thanks for your help once again :smiley:

Could I add this to base.css, or would you recommend using Custom CSS instead?

1 Like
4

Well, if you add it to the Custom CSS it should transfer over with theme upgrades.