bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 01:03:35 +00:00
Code Issues Releases Wiki Activity

[CL-601] Replace default reset button to enable it in more browsers (#14974)

Browse Source 
* bb/pm-19497/replace default reset button to enable it in more browsers

* address feedback: add ngClass; improve accessibility

* add signals for form hover and input focus; compute showResetButton

* fix(style): [CL-601] Improve CSS per reviewer comments

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] add ngForm; remove standalone attributes

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] add translation strings

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] Use message key in aria label

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] Remove unnecessary aria-hidden attribute

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] Remove unecessary ngForm attributes

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] Add storybook description

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] Match main for recent signal input changs

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

---------

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>
This commit is contained in:
Ben Brooks
2025-07-23 09:17:47 -07:00
committed by GitHub
parent d0082981a3
commit a74e95fbfe
7 changed files with 62 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
libs/components/src/search/search.component.ts
View File

@@ -1,6 +1,7 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Component, ElementRef, ViewChild, input, model } from "@angular/core";
import { NgIf, NgClass } from "@angular/common";
import { Component, ElementRef, ViewChild, input, model, signal, computed } from "@angular/core";
import {
ControlValueAccessor,
NG_VALUE_ACCESSOR,
@@ -16,6 +17,9 @@ import { FocusableElement } from "../shared/focusable-element";
let nextId = 0;
/**
* Do not nest Search components inside another `<form>`, as they already contain their own standalone `<form>` element for searching.
*/
@Component({
selector: "bit-search",
templateUrl: "./search.component.html",
@@ -30,7 +34,7 @@ let nextId = 0;
useExisting: SearchComponent,
},
],
imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe],
imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe, NgIf, NgClass],
})
export class SearchComponent implements ControlValueAccessor, FocusableElement {
private notifyOnChange: (v: string) => void;
@@ -43,6 +47,11 @@ export class SearchComponent implements ControlValueAccessor, FocusableElement {
// Use `type="text"` for Safari to improve rendering performance
protected inputType = isBrowserSafariApi() ? ("text" as const) : ("search" as const);
protected isInputFocused = signal(false);
protected isFormHovered = signal(false);
protected showResetButton = computed(() => this.isInputFocused() || this.isFormHovered());
readonly disabled = model<boolean>();
readonly placeholder = input<string>();
readonly autocomplete = input<string>();
@@ -52,11 +61,20 @@ export class SearchComponent implements ControlValueAccessor, FocusableElement {
}
onChange(searchText: string) {
this.searchText = searchText; // update the model when the input changes (so we can use it with *ngIf in the template)
if (this.notifyOnChange != undefined) {
this.notifyOnChange(searchText);
}
}
// Handle the reset button click
clearSearch() {
this.searchText = "";
if (this.notifyOnChange) {
this.notifyOnChange("");
}
}
onTouch() {
if (this.notifyOnTouch != undefined) {
this.notifyOnTouch();