Prevent Android keyboard in Chrome from showing password management on HTML input

Question

I have an HTML <input> element which, when focused in Chrome android, shows this annoying password management feature above the keyboard which takes up screen real estate. It's not a password type field so I'm not sure why this is happening. Any idea how to get rid of it?

<form id="guess-form" class="svelte-1o40qmd">
    <button id="btn-top" type="button" class="svelte-1o40qmd">▲ Top</button> 
    <input id="input-guess" 
      type="text" 
      spellcheck="true" autofocus="" 
      placeholder="Something" 
      autocomplete="off" 
      title="Something" 
      class="svelte-1o40qmd"/> 
    <input id="submit" type="submit" value="Guess" class="svelte-1o40qmd"/>
</form>

Update: This is a Chrome bug so remember to report it to the Chrome team (help -> report an issue).

Answer 1

I came across this problem while creating a very similar thing. This is surely an Android Chrome bug as it makes no sense for a Password bar to be showing there.

The problem is evident on MDN when clicking into the sample input elements. It happens with type="text", type="number", type="password", type="tel", type="url", type="email"

But blessedly, it does not happen if you turn it into a search input, eg.

<input type="search" />

In my case, the input can actually be considered a search input of sorts, so I'm comfortable changing it to one as it makes semantic sense.

For anyone else who just wants to get rid of the unnecessary password bar, you will have to toss up whether throwing out semantics and accessibility is worth it.

And you will need to add some extra styling to try and make it look like a normal text input. In my testing, I only really noticed a difference in styling in iOS where a little search icon is added at the start of the input. To remove this, you can add the following CSS rule to the input

-webkit-appearance: none; 

For completeness, you may also want to tackle the non-prefixed and moz-prefixed versions.

appearance: none;
-moz-appearance: none;

*Side note for OP: I also came across this problem while building a little game in Svelte, so my input looks almost identical to yours! You can see the game here with the input now changed to a search input *