Useability issue with handheld search form input

Our testing team repeatedly reported that the search form on handheld footer bar is not working in storefront. But that was not true.
We have found out that users tap the magnifying glass icon to trigger the search after they entered they search phrase (the same icon with which they brought up the search form initialy).
But they must use the keyboard of their mobile device instead to trigger the search, which often is represented by a magnifying glass icon too.
This is leads to the misunderstanding, that another tap on this icon will bring up the search results. But it does only colapse the search form and nothing else happens. So the user experience feels like: this does not work.

see picture: https://i.imgur.com/DANBODf.jpg

My suggestions is that the icon becomes a submit form function after the user has entered his search phrase and tapped the icon again, instead of colapsing the search form (which, nearby does not clear the text that was entered).

As an workarround I added this to my style.css which is hiding the icon as long as the search form is active:

/* storefront mobile handheld useability issue for search form. hide search icon when active */
.storefront-handheld-footer-bar ul li.search.active > a::before {
    content: none;
}

see picture: https://i.imgur.com/o5SHAIU.jpg

• This topic was modified 2 years, 10 months ago by mmtomm. Reason: pictures not showing correct