From 25c848489a959b0606b2d4047fa6fdabc6a6d467 Mon Sep 17 00:00:00 2001
From: bensbits91 <benbpnw@gmail.com>
Date: Tue, 10 Jun 2025 13:05:20 -0700
Subject: [PATCH] add signals for form hover and input focus; compute
 showResetButton

---
 .../src/search/search.component.html          | 23 ++++++++++---------
 .../components/src/search/search.component.ts | 11 +++++----
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/libs/components/src/search/search.component.html b/libs/components/src/search/search.component.html
index 18fc48ee7ab..b3b92e0ed18 100644
--- a/libs/components/src/search/search.component.html
+++ b/libs/components/src/search/search.component.html
@@ -1,5 +1,10 @@
 <div class="tw-relative tw-flex tw-items-center">
-  <form role="search" class="tw-relative tw-flex tw-items-center tw-w-full">
+  <form
+    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"
@@ -18,24 +23,20 @@
       [ngModel]="searchText"
       (ngModelChange)="onChange($event)"
       [ngModelOptions]="{ standalone: true }"
-      (focus)="isInputFocused = true"
-      (blur)="isInputFocused = false; onTouch()"
-      (mouseenter)="isInputHovered = true"
-      (mouseleave)="isInputHovered = false"
+      (focus)="isInputFocused.set(true)"
+      (blur)="isInputFocused.set(false); onTouch()"
       [disabled]="disabled"
       [attr.autocomplete]="autocomplete"
     />
     <button
-      *ngIf="searchText"
-      (mouseenter)="resetHovered = true"
-      (mouseleave)="resetHovered = false"
+      *ngIf="searchText && showResetButton()"
       [ngClass]="{
-        'tw-opacity-0': !isInputFocused && !isInputHovered && !resetHovered,
-        'tw-bg-text-muted': isInputFocused || isInputHovered || resetHovered,
+        'tw-opacity-0': !showResetButton(),
+        'tw-bg-text-muted': showResetButton(),
       }"
       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"
-      [attr.aria-label]="searchText ? ('Reset search' | i18n) : ('' | i18n)"
+      [attr.aria-label]="searchText ? ('Reset search' | i18n) : ''"
       [attr.aria-hidden]="!searchText"
       (click)="clearSearch()"
     ></button>
diff --git a/libs/components/src/search/search.component.ts b/libs/components/src/search/search.component.ts
index 325a790e4e7..b61a7cf6fda 100644
--- a/libs/components/src/search/search.component.ts
+++ b/libs/components/src/search/search.component.ts
@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { NgIf, NgClass } from "@angular/common";
-import { Component, ElementRef, Input, ViewChild } from "@angular/core";
+import { Component, ElementRef, Input, ViewChild, signal, computed } from "@angular/core";
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -44,10 +44,11 @@ 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;
+
+  protected isInputFocused = signal(false);
+  protected isFormHovered = signal(false);
+
+  protected showResetButton = computed(() => this.isInputFocused() || this.isFormHovered());
 
   @Input() disabled: boolean;
   @Input() placeholder: string;