6.3.2: Search not clearing

Beta
#1

Hi!

When a site search is performed by the user, (Search element inside a modal), he gets the search results. When a repeated search is made, the previous one is not cleared, forcing the user to delete the previous one before making the new search.

Search field should be always cleared, ready for the next search. I think it used to work like that sometimes before.

This is an odd one. When I drop the Search modal as is and use it on (Android) mobile, the mobile keyboard will push the search field upwards, keeping it centered. As soon as I edit something, like the toggle’s background color, border-radius and the box-shadow, it stops moving upwards. It stays covered by the keyboard.

Thank you!

#2

Just a comment regarding your first point: I find it horrible UX when the search field clears after I search something. For example, I might have entered my search term with a typo, yielding no results. I can just correct the typo when the search field is persistent. Otherwise, I will have to enter the whole thing again.
Of course, your particular application might be different.

#3

I understand. Maybe the back button can get to the previous input? I haven’t tested that.

In e-commerce for example, people tend to perform multiple searches in a row while trying to find the product they need. A non-clearing search is lowering conversion rates.

In addition, I recommend using an advanced search susca as Relevanssi. It accounts for the typos and returns the “Did you mean…”.

#4

I’ll setup a control and filter for this. You cannot change the input without changing the filter outlined here, but I think that would actively change the search query. Thanks have a great day!

image

2 Likes
#5

Hi @charlie!

Clearing works great, but the Search element inside the Modal still gets pushed by the Android keyboard.

Screenshot_20231110_113714_Chrome
Screenshot_20231110_113714_Chrome1440Ă—2988 631 KB

Not sure if this is due to my settings or it is still an issue to solve. I played with it a lot, and can’t get it staying in the center when the keyboard is activated.

Thanks!

1 Like
#6

I do see it scrolling to the top on your page. Oddly enough on my sites it would usually go straight to the middle which is what I was trying to setup. Your whole input was still visible for me. What device are you using? There is some CSS property we can use for this, I do think I need to change some things on our end to support this, but you can try this CSS. Putting this on the search input element.

$el input {
  scroll-margin: 40px;
}
1 Like