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

* 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>

apps/browser/src/_locales/en/messages.json

@@ -547,6 +547,9 @@
   "searchVault": {
     "message": "Search vault"
   },
+  "resetSearch": {
+    "message": "Reset search"
+  },
   "edit": {
     "message": "Edit"
   },

apps/desktop/src/locales/en/messages.json

@@ -41,6 +41,9 @@
   "searchVault": {
     "message": "Search vault"
   },
+  "resetSearch": {
+    "message": "Reset search"
+  },
   "addItem": {
     "message": "Add item"
   },

apps/web/src/locales/en/messages.json

@@ -629,6 +629,9 @@
   "searchGroups": {
     "message": "Search groups"
   },
+  "resetSearch": {
+    "message": "Reset search"
+  },
   "allItems": {
     "message": "All items"
   },

libs/components/src/search/search.component.css

@@ -1,19 +1,17 @@
 /**
  * Tailwind doesn't have a good way to style search-cancel-button.
+ * Hide the default reset button that only appears in some browsers.
  */
 bit-search input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   appearance: none;
-  height: 21px;
-  width: 21px;
-  margin: 0;
-  cursor: pointer;
-  background-repeat: no-repeat;
-  mask-image: url("./close-button.svg");
-  -webkit-mask-image: url("./close-button.svg");
-  background-color: rgba(var(--color-text-muted));
 }
 
-bit-search input[type="search"]::-webkit-search-cancel-button:hover {
+/**
-  background-color: rgba(var(--color-text-main));
+ * Style our custom reset button that works in all common browsers.
+ * Tailwind CSS does not natively support mask-image or -webkit-mask-image utilities (but can be extended if needed).
+ */
+.bw-reset-btn {
+  mask-image: url("./close-button.svg");
+  -webkit-mask-image: url("./close-button.svg");
 }

libs/components/src/search/search.component.html

@@ -1,9 +1,14 @@
-<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
+<form
-<div class="tw-relative tw-flex tw-items-center">
+  role="search"
+  (mouseenter)="isFormHovered.set(true)"
+  (mouseleave)="isFormHovered.set(false)"
+  class="tw-relative tw-flex tw-items-center tw-w-full"
+>
+  <label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
   <label
     [for]="id"
     aria-hidden="true"
-    class="tw-absolute tw-left-2 tw-z-20 !tw-mb-0 tw-cursor-text"
+    class="tw-absolute tw-start-2 tw-z-20 !tw-mb-0 tw-cursor-text"
   >
     <i class="bwi bwi-search bwi-fw tw-text-muted"></i>
   </label>
@@ -14,10 +19,23 @@
     [id]="id"
     [placeholder]="placeholder() ?? ('search' | i18n)"
     class="tw-ps-9"
+    name="searchText"
     [ngModel]="searchText"
     (ngModelChange)="onChange($event)"
-    (blur)="onTouch()"
+    (focus)="isInputFocused.set(true)"
+    (blur)="isInputFocused.set(false); onTouch()"
     [disabled]="disabled()"
     [attr.autocomplete]="autocomplete()"
   />
-</div>
+  <button
+    *ngIf="searchText && showResetButton()"
+    [ngClass]="{
+      'tw-opacity-0': !showResetButton(),
+      'tw-bg-text-muted': showResetButton(),
+    }"
+    class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-end-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
+    type="reset"
+    [attr.aria-label]="'resetSearch' | i18n"
+    (click)="clearSearch()"
+  ></button>
+</form>

libs/components/src/search/search.component.ts

@@ -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();

libs/components/src/search/search.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source, Primary, Controls, Title } from "@storybook/addon-docs";
+import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
 
 import * as stories from "./search.stories";
 
@@ -9,6 +9,7 @@ import { SearchModule } from "@bitwarden/components";
 ```
 
 <Title>Search field</Title>
+<Description />
 
 <Primary />
 <Controls />