fix(ui): suppress password-manager autofill icons on form inputs#210
Open
patrickrb wants to merge 5 commits into
Open
fix(ui): suppress password-manager autofill icons on form inputs#210patrickrb wants to merge 5 commits into
patrickrb wants to merge 5 commits into
Conversation
Password managers (LastPass, 1Password) were attaching their autofill UI to ham-radio data fields like callsign, RST, datetime, etc. — fields that have nothing to do with credentials. Set autoComplete="off" and the per-manager opt-out data attributes (data-lpignore, data-1p-ignore, data-form-type="other") as defaults on the shared Input component and the combobox search input. Patched the five raw <input> elements that bypass the shared component too (new-contact callsign + RST sent/received, dashboard table search, combobox). Auth forms (login/register, LoTW password, station password) already pass explicit autoComplete values, which still override. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…nore LastPass ignores data-lpignore on the search page callsign input because the filter fields aren't inside a <form> — LP treats standalone inputs more aggressively than form-bound ones. Wrapping the filters in a form with autoComplete="off" gives LP a form context to bind to, and it then honors the per-input opt-out attrs. Search is debounced on filter change, so the form has no real submit action — onSubmit calls preventDefault to keep Enter from triggering a page navigation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LastPass keeps attaching its autofill icon to the search-page callsign input despite data-lpignore being set and the fields being wrapped in a <form>. Switching the text filters to type="search" tells LP these are search inputs, which it skips entirely. Applied to callsign, name, qth, and gridLocator — the four free-text filter fields. Semantically these are search inputs anyway, so the type change matches their actual role. (Browser-default styling of search inputs is suppressed by the shared Input component's own CSS.) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The data-lpignore / data-1p-ignore attrs we set as defaults on the shared Input component aren't honored on every field — LP keeps attaching its icon to fields like profile name, station-edit city / operator-name / club-callsign, and the new-contact datetime picker. Adding a global CSS rule that: - Hides the LP/1P icon overlay sibling elements that get injected next to inputs already opted out via the data-* attrs. - Resets background-image on opted-out inputs (covers the inline- injection variant some LP versions use). - Hides the WebKit credentials-auto-fill pseudo-element as a backup. This is the catch-all for fields where type="search" isn't a fit (date/datetime, plain text inputs that need normal browser behavior). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The CSS selectors in the previous attempt were guesses for an older LP variant — the actual injection is <svg data-lastpass-icon="true"> positioned absolutely over the input, ignoring data-lpignore. Replacing the speculative selectors with the real one. Also adding parity selectors for 1Password / Dashlane / Bitwarden so any future manager that injects its standard marker is also suppressed. Tradeoff: hides LP's in-field icon on the auth forms too. The forms still autofill correctly — users trigger LP via the extension's keyboard shortcut or the dropdown that appears when focused. Only the in-field icon overlay is hidden. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aims to prevent password managers (LastPass/1Password/etc.) from showing autofill UI on non-credential “ham radio data” inputs across the app by setting opt-out attributes on shared inputs and a few raw <input> instances, plus adding a global CSS suppression rule.
Changes:
- Adds password-manager suppression defaults (
autoComplete="off",data-lpignore,data-1p-ignore,data-form-type) to the sharedInputcomponent and the Combobox search input. - Wraps Search filters in a
<form>and changes several filter inputs totype="search". - Adds a global CSS rule intended to hide injected password-manager overlay UI elements, and patches a few remaining raw
<input>fields (new-contact + dashboard search).
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/input.tsx | Sets default autocomplete/ignore attributes on the shared Input component. |
| src/components/ui/combobox.tsx | Applies autocomplete/ignore attributes to the combobox internal search input. |
| src/app/search/page.tsx | Wraps filters in a form and updates some filter fields to type="search". |
| src/app/new-contact/page.tsx | Adds ignore attributes to raw callsign/RST inputs that bypass the shared Input. |
| src/app/dashboard/page.tsx | Adds ignore attributes to the dashboard table search raw input. |
| src/app/globals.css | Adds global CSS to hide injected password-manager overlay elements. |
Comment on lines
+43
to
47
| autoComplete="off" | ||
| data-lpignore="true" | ||
| data-1p-ignore="" | ||
| data-form-type="other" | ||
| {...props} |
Comment on lines
+251
to
+256
| svg[data-lastpass-icon="true"], | ||
| com-1password-button, | ||
| [data-dashlane-rid], | ||
| [data-bitwarden-watching] { | ||
| display: none !important; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
autoComplete="off"plusdata-lpignore/data-1p-ignore/data-form-type="other"as defaults on the sharedInputcomponent and theComboboxsearch input.<input>elements that bypass the shared component (new-contact callsign + RST sent/received, dashboard table search, combobox internal search).autoCompletevalues like"email"/"current-password"/"new-password", which override the new default via prop spread.Test plan
/new-contact,/search,/dashboard,/profile,/stations/<id>/edit, and the edit-contact dialog from the dashboard — no LP icons should appear on data fields (callsign, RST, datetime, name, city, club callsign, operator name, table search)./login,/register, the LoTW password field, and the station password field still show the password-manager autofill UI (since they pass explicitautoCompletevalues).npm run typecheckcleannpm run lintclean🤖 Generated with Claude Code