fix: fix searchbox carousel navigation behaviour

projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html

@@ -149,6 +149,7 @@ <h3 *ngIf="result.products?.length">
         [items]="items"
         [template]="carouselItem"
         itemWidth="160px"
+        [preventNavigationFocus]="true"
         (keybordEvent)="carouselEventPropagator($event)"
       >
       </cx-carousel>

projects/storefrontlib/shared/components/carousel/carousel.component.html

@@ -5,10 +5,8 @@ <h2 *ngIf="title">{{ title }}</h2>
     <button
       *ngIf="size < items.length"
       class="previous"
-      (click)="
-        $event.stopPropagation();
-        activeSlide === 0 ? null : (activeSlide = activeSlide - size)
-      "
+      (mousedown)="onNavigationMouseDown($event)"
+      (click)="onPreviousClick($event, size)"
       [attr.aria-disabled]="activeSlide === 0"
       [attr.aria-label]="'carousel.previousSlide' | cxTranslate"
       [attr.title]="'carousel.previousSlide' | cxTranslate"
@@ -57,12 +55,8 @@ <h2 *ngIf="title">{{ title }}</h2>
     <button
       *ngIf="size < items.length"
       class="next"
-      (click)="
-        $event.stopPropagation();
-        activeSlide > items.length - size - 1
-          ? null
-          : (activeSlide = activeSlide + size)
-      "
+      (mousedown)="onNavigationMouseDown($event)"
+      (click)="onNextClick($event, size)"
       [attr.aria-disabled]="activeSlide > items.length - size - 1"
       [attr.aria-label]="'carousel.nextSlide' | cxTranslate"
       [attr.title]="'carousel.nextSlide' | cxTranslate"

projects/storefrontlib/shared/components/carousel/carousel.component.ts

@@ -115,6 +115,13 @@ export class CarouselComponent implements OnInit, OnChanges {
   @Input() previousIcon = ICON_TYPE.CARET_LEFT;
   @Input() nextIcon = ICON_TYPE.CARET_RIGHT;
 
+  /**
+   * When true, prevents default mousedown behavior on navigation buttons to avoid
+   * unwanted blur events (e.g., in Safari when carousel is used inside modals or search boxes).
+   * Defaults to false to maintain backward compatibility.
+   */
+  @Input() preventNavigationFocus = false;
+
   /**
    * Angular's trackBy function for iterating over carousel items.
    *
@@ -151,6 +158,39 @@ export class CarouselComponent implements OnInit, OnChanges {
       .getItemsPerSlide(this.el.nativeElement, this.itemWidth)
       .pipe(tap(() => (this.activeSlide = 0)));
   }
+  /**
+   * Prevents default mousedown behavior on navigation buttons when enabled
+   * to avoid unwanted blur events (e.g., in Safari when carousel is used inside modals or search boxes).
+   */
+  onNavigationMouseDown(event: MouseEvent): void {
+    if (this.preventNavigationFocus) {
+      event.preventDefault();
+    }
+  }
+
+  /**
+   * Handler for the "next" button click.
+   */
+  onNextClick(event: MouseEvent, size: number): void {
+    event.stopPropagation();
+
+    const itemsLength = this.items?.length ?? 0;
+    const canMove = this.activeSlide <= itemsLength - size - 1;
+
+    if (canMove) {
+      this.activeSlide = this.activeSlide + size;
+    }
+  }
+
+  /**
+   * Handler for the "previous" button click.
+   */
+  onPreviousClick(event: MouseEvent, size: number): void {
+    event.stopPropagation();
+    if (this.activeSlide !== 0) {
+      this.activeSlide = this.activeSlide - size;
+    }
+  }
 
   onItemKeydown(event: KeyboardEvent, size: number): void {
     switch (event.key) {