CODEWITHSUNDEEP
javascriptandroidhtmlcssgoogle-chrome
Jussinevavuori
Jussinevavuori

Reputation: 41

How to hide Chrome on Android password suggestion ribbon on regular inputs

Chrome on Android is showing a password suggestion ribbon for unrelated inputs and I can't find any way to hide it.

I have a form with multiple inputs (created in React). All of them are of type "text", "date", "number" or other non-login form related type. Each one of them has both attributes autocomplete="off" and aria-autocomplete="none". The surrounding form has those attributes as well.

No matter what I do, this password ribbon appears on Chrome for Android. (Chrome version 103.0.5060.70, running on Android 10) and I can't seem to find any information about it online. No settings or experimental flags in Chrome to disable it, no HTML attributes which prompt it to be shown nor attributes to hide it.

The ribbon causes two problems:

  1. The UX problem: Obviously, I don't want users to get password suggestions for completely unrelated inputs.
  2. The Layout problem: The bottom sheet shown in the image is positioned with bottom: 0, and the password ribbon disappears (not visually but from the layout) for less than 50 milliseconds, causing an abrupt jump. (This I could get around by manually positioning the bottom sheet to the bottom of the page with top: {window.innerHeight}px and animating that property using Framer motion with a delay of 50ms.

Can anyone tell me anything about this password ribbon?

(See below for image of app and the password ribbon showing on an unrelated text input.)

Image of the Ribbon in action

Upvotes: 4

Views: 237

Answers (1)

Benbob
Benbob

Reputation: 14244

This is a Chrome bug. See duplicate (Prevent Android keyboard in Chrome from showing password management on HTML input)

The workaround is to set type="search" on your input.

Upvotes: 1

Related Questions