… there is something going on now about this topic:
main ← bensbits91:pm-19497-reset-search-x-browser
opened 11:29PM - 27 May 25 UTC
## 📓 Notes
I drafted this PR primarily to familiarize myself with the monorep… o, your contribution processes, and browser extension development in general, as well as brush up on my Angular skills. I initially shared this PR to followup on a discussion I had with Bitwarden devs during a tech interview. While this is a functional change and might be suited for formal review, I have only tested it using Chrome and Firefox (this issue pertains to the Firefox extension). We might also be able to find a more elegant solution.
I have not done the following (but am happy to):
- [ ] Unit test for the new button.
- [ ] Testing on more browsers.
- [ ] LaunchDarkly feature flag.
- [x] Resolve conflicts with main.
## 🎟️ Tracking
GitHub Issue: https://github.com/bitwarden/clients/issues/13982
Jira ticket number: PM-19497
## 📔 Objective
- Update the template (search.component.html) to add a new reset button:
- Wrap the existing label and input in a form element, which is required for our new custom reset button to work properly.
- Add event bindings to the input for `focus`, `blur`, `mouseenter` and `mouseleave` to facilitate emulating the hiding/showing of the default reset button.
- Add the new reset button, including:
- An `*ngIf="searchText"` directive and event bindings to enable hiding our new button when the input is empty.
- Class bindings to reproduce our old reset button style.
- The (click) event handler that triggers clearing the input.
- Update the class to:
- Track the input's focus/blur and hover states (to facilitate emulating the hiding/showing of the default reset button).
- Update the model in the `onChange` lifecycle hook (i.e. `this.searchText = searchText;`), to enable hiding our new reset button when the input is empty.
- Add the `clearSearch` method that clears the input, which is called by clicking our new reset button.
- Update CSS (search.component.css) to hide the default reset button, which only appears in some browsers (e.g. Chrome).
## 📸 Screenshots
## ⏰ Reminders before review
- [x] Contributor guidelines followed
- [x] All formatters and local linters executed and passed
- [ ] Written new unit and / or integration tests where applicable
- [ ] Protected functional changes with optionality (feature flags)
- [ ] Used internationalization (i18n) for all UI strings
- [ ] CI builds passed
- [ ] Communicated to DevOps any deployment requirements
- [ ] Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team
## 🦮 Reviewer guidelines
- 👍 (`:+1:`) or similar for great changes
- 📝 (`:memo:`) or ℹ️ (`:information_source:`) for notes or general info
- ❓ (`:question:`) for questions
- 🤔 (`:thinking:`) or 💭 (`:thought_balloon:`) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
- 🎨 (`:art:`) for suggestions / improvements
- ❌ (`:x:`) or ⚠️ (`:warning:`) for more significant problems or concerns needing attention
- 🌱 (`:seedling:`) or ♻️ (`:recycle:`) for future improvements or indications of technical debt
- ⛏ (`:pick:`) for minor or nitpick changes
Closed as implemented.
(I just tested it with the current versions – and both in the Firefox browser extension 2025.8.2 and when you login to the web vault 2025.8.2 on Firefox, you can now clear search terms with “X”)