feat(search): update search functionality to handle button click and Enter key press

src/app/core/layout/store-layout/store-header/store-header.component.html

@@ -21,7 +21,7 @@
       <div
         class="d-flex flex-row align-items-center gap-3 ms-auto flex-nowrap flex-grow-1 justify-content-between justify-content-md-end"
       >
-        <form class="input-group store-layout__search" role="search" (ngSubmit)="submitSearch()">
+        <div class="input-group store-layout__search" role="search">
           <label class="visually-hidden" for="store-search-input">Buscar productos</label>
           <input
             id="store-search-input"
@@ -30,15 +30,17 @@
             placeholder="Buscar productos"
             autocomplete="off"
             [formControl]="searchControl"
+            (keydown.enter)="submitSearch($event)"
           />
           <button
-            type="submit"
+            type="button"
             class="btn store-layout__search-button border-start-0 rounded-end px-3"
             aria-label="Buscar"
+            (click)="submitSearch()"
           >
             <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
           </button>
-        </form>
+        </div>
 
         @if (ticketsMenu(); as menu) {
           <app-button

src/app/core/layout/store-layout/store-header/store-header.component.ts

@@ -75,7 +75,9 @@ export class StoreHeaderComponent {
     this.logoutClick.emit();
   }
 
-  protected submitSearch(): void {
+  protected submitSearch(event?: Event): void {
+    event?.preventDefault();
+
     const term = this.searchControl.value.trim();
 
     if (term.length >= 2) {

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -218,17 +218,17 @@ describe('StoreLayoutComponent', () => {
     expect(compiled.querySelector('.fa-linkedin-in')).not.toBeNull();
   });
 
-  it('navigates to search results when the search form is submitted', () => {
+  it('navigates to search results when the search button is clicked', () => {
     const router = TestBed.inject(Router);
     vi.spyOn(router, 'navigate');
     const fixture = TestBed.createComponent(StoreLayoutComponent);
     fixture.detectChanges();
 
     const header = fixture.debugElement.query(By.directive(StoreHeaderComponent));
-    const form = header.query(By.css('form[role="search"]'));
+    const searchButton = header.query(By.css('.store-layout__search-button'));
 
     (header.componentInstance as any).searchControl.setValue('  zapatillas  ');
-    form.triggerEventHandler('ngSubmit');
+    searchButton.triggerEventHandler('click');
     fixture.detectChanges();
 
     expect(router.navigate).toHaveBeenCalledWith(['/buscar'], {
@@ -236,6 +236,27 @@ describe('StoreLayoutComponent', () => {
     });
   });
 
+  it('prevents the native submit and searches when Enter is pressed', () => {
+    const router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigate');
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    const header = fixture.debugElement.query(By.directive(StoreHeaderComponent));
+    const input = header.query(By.css('#store-search-input'));
+    const keyboardEvent = {
+      preventDefault: vi.fn(),
+    };
+
+    (header.componentInstance as any).searchControl.setValue('remera');
+    input.triggerEventHandler('keydown.enter', keyboardEvent);
+
+    expect(keyboardEvent.preventDefault).toHaveBeenCalled();
+    expect(router.navigate).toHaveBeenCalledWith(['/buscar'], {
+      queryParams: { q: 'remera', page: 1 },
+    });
+  });
+
   it('renders the primary tickets action when the tenant has the tickets menu', () => {
     const router = TestBed.inject(Router);
     vi.spyOn(router, 'navigate');