fix(SearchFilter): add data-1p-ignore attribute to Search input for improved accessibility
SUMMARY
Password managers like 1Password ignore autocomplete="off" when the input has name="name" because they recognize common field name patterns (like "name", "email", "password", etc.).
The happens only if the ListViewFilters has id: 'name' and input: 'search'.
Solution:
Added a new inputName property to the ListViewFilter type that allows you to set a custom name for the input element that password managers won't recognize:
- types.ts - Added
inputName?: string;to theListViewFilterinterface. - Filters/index.tsx - Updated to use
inputName ?? idwhen passing the name prop toSearchFilter - GroupsList/index.tsx - Changed the
Namefilter to useinputName: 'group_list_search'
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
A 1password auto-fill icon was shown for some search components when the name was not passed correctly. Resulting in an attr like the following:
name="name"
After:
Example of the pages failing
Annotation Layer, Alert Report List, Groups List, Roles List, Row Level Security List and Tags.
name="annotation_layer_list_search"
TESTING INSTRUCTIONS
- Login.
- Enter user settings that has a search input box, for example Annotations Layers.
- Try typing on the search box, the 1password icon must not appear.
ADDITIONAL INFORMATION
- [x] Has associated issue:
- [ ] Required feature flags:
- [ ] Changes UI
- [ ] Includes DB Migration (follow approval process in SIP-59)
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
Code Review Agent Run #130649
Actionable Suggestions - 0
Review Details
-
Files reviewed - 1 · Commit Range:
143b23a..bb79f69- superset-frontend/src/components/ListView/Filters/Search.tsx
-
Files skipped - 0
-
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful
Bito Usage Guide
Commands
Type the following command in the pull request comment and save the comment.
-
/review- Manually triggers a full AI review. -
/pause- Pauses automatic reviews on this pull request. -
/resume- Resumes automatic reviews. -
/resolve- Marks all Bito-posted review comments as resolved. -
/abort- Cancels all in-progress reviews.
Refer to the documentation for additional commands.
Configuration
This repository uses Default Agent You can customize the agent settings here or contact your Bito workspace admin at [email protected].
Documentation & Help
Can we check what 1password tries to fill this in with and change name/id attributes accordingly?
Sure, I'll try to check it and see if with an update of the name/id will suffice
@msyavuz I think we're good for a re-review here :)
CodeAnt AI is reviewing your PR.
Nitpicks 🔍
| 🔒 No security issues identified |
⚡ Recommended areas for review
|
CodeAnt AI finished reviewing your PR.
Let us know if any of the codeant suggestions are worth consideration, but otherwise happy to merge.
Let's also update the pr title as well
@msyavuz I checked the codeant suggestions and I don't think they are worth to be taken into consideration, mostly because it is confused about the 'id' param and we send a 'name' value (which is totally understandable), other than that, I think we are good for the merge!
CodeAnt AI is running Incremental review
Rebase
CodeAnt AI is running Incremental review
CodeAnt AI is running Incremental review
Thanks for using CodeAnt! 🎉
We're free for open-source projects. if you're enjoying it, help us grow by sharing.
Share on X · Reddit · LinkedIn