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

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,23 +1,39 @@
 <label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
 <div class="tw-relative tw-flex tw-items-center">
-  <label
-    [for]="id"
-    aria-hidden="true"
-    class="tw-absolute tw-left-2 tw-z-20 !tw-mb-0 tw-cursor-text"
-  >
-    <i class="bwi bwi-search bwi-fw tw-text-muted"></i>
-  </label>
-  <input
-    #input
-    bitInput
-    [type]="inputType"
-    [id]="id"
-    [placeholder]="placeholder ?? ('search' | i18n)"
-    class="tw-pl-9"
-    [ngModel]="searchText"
-    (ngModelChange)="onChange($event)"
-    (blur)="onTouch()"
-    [disabled]="disabled"
-    [attr.autocomplete]="autocomplete"
-  />
+  <form class="tw-relative tw-flex tw-items-center tw-w-full">
+    <label
+      [for]="id"
+      aria-hidden="true"
+      class="tw-absolute tw-left-2 tw-z-20 !tw-mb-0 tw-cursor-text"
+    >
+      <i class="bwi bwi-search bwi-fw tw-text-muted"></i>
+    </label>
+    <input
+      #input
+      bitInput
+      [type]="inputType"
+      [id]="id"
+      [placeholder]="placeholder ?? ('search' | i18n)"
+      class="tw-pl-9"
+      [ngModel]="searchText"
+      (ngModelChange)="onChange($event)"
+      [ngModelOptions]="{ standalone: true }"
+      (focus)="isInputFocused = true"
+      (blur)="isInputFocused = false; onTouch()"
+      (mouseenter)="isInputHovered = true"
+      (mouseleave)="isInputHovered = false"
+      [disabled]="disabled"
+      [attr.autocomplete]="autocomplete"
+    />
+    <button
+      *ngIf="searchText"
+      (mouseenter)="resetHovered = true"
+      (mouseleave)="resetHovered = false"
+      [class.opacity-0]="!isInputFocused && !isInputHovered && !resetHovered"
+      [class.tw-bg-text-muted]="isInputFocused || isInputHovered || resetHovered"
+      class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-right-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
+      type="reset"
+      (click)="clearSearch()"
+    ></button>
+  </form>
 </div>

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

@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { NgIf } from "@angular/common";
 import { Component, ElementRef, Input, ViewChild } from "@angular/core";
 import {
   ControlValueAccessor,
@@ -31,7 +32,7 @@ let nextId = 0;
     },
   ],
   standalone: true,
-  imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe],
+  imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe, NgIf],
 })
 export class SearchComponent implements ControlValueAccessor, FocusableElement {
   private notifyOnChange: (v: string) => void;
@@ -43,6 +44,10 @@ export class SearchComponent implements ControlValueAccessor, FocusableElement {
   protected searchText: string;
   // Use `type="text"` for Safari to improve rendering performance
   protected inputType = isBrowserSafariApi() ? ("text" as const) : ("search" as const);
+  // Optional: Track focus and hover state of the input to emulate the hiding/showing of the native reset button
+  protected isInputFocused = false;
+  protected isInputHovered = false;
+  protected resetHovered = false;
 
   @Input() disabled: boolean;
   @Input() placeholder: string;
@@ -53,11 +58,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();