Android issue on search field

[lmdpires]

Good afternoon. I'm having problems with the search field on mobile with older versions of Android (version 11 and 12 for example). In order for the search field to appear, I have to click on the 3 dashes in the top right corner and it appears, but when I try to type something into the search, the field disappears and I can't search for anything. This only happens on older versions of android in chrome.

Is there a solution to this kind of problem? I've been reading and they talk a lot about the javascript focus, but if you change it, it will also change in the desktop version, right? And I don't really know much about javascript.

The solution might be for the search field to always be visible on mobile, but I can't do that either.

The code I have in the CSS is this:

@media screen and (max-width: 600px) {

.search [type="search"] {

float: none;
display: block;
text-align: left;
width: 100%;
margin-top: 10px;
padding: 4px;
background-color: #FFF;

}

.search input[type="search"] {
border: 1px solid #ddd;
border-radius: 30px;
box-sizing: border-box;
color: #999;
height: 40px;
padding-left: 40px;
padding-right: 20px;
-webkit-appearance: none;
width: 100%;
margin-bottom: 15px;

}

Thank you all.

Translated with DeepL.com (free version)

search.mobile.2.mp4