Browser Autofill Incorrectly fills ComboBox even if autocomplete is off

Flow
1

Hi all,

I’m facing an issue in a Vaadin 24 (Flow) application where Chrome’s built-in autofill fills a vaadin-combo-box inside my custom LitTemplate with the user’s email address.

This happens only when the user logs in using Chrome’s saved credentials (browser autofill).

What I’ve tried

  • autocomplete="off" and autocomplete="new-password" on the ComboBox
  • Randomizing name attributes
  • Modifying the internal <input> inside the shadowRoot via JS

What works

  • A “trap input” before the ComboBox, so that browser will fill this instead of CombBox

Question

Is there a recommended way to reliably prevent Chrome autofill from targeting Vaadin ComboBox?
Any official guidance or best practices would be appreciated.

Thanks!

2

Official Chromium ticket here: Chromium
Stack Overflow question with various workarounds: html - Disabling Chrome Autofill - Stack Overflow