Skip to content

fix: fix searchbox carousel navigation behaviour #21141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
c5346163 wants to merge 13 commits into
base: develop
Choose a base branch
from
+45 −10
Draft

fix: fix searchbox carousel navigation behaviour #21141

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
51e6260
Fix searchbox carousel navigation behaviour
c5346163 Feb 10, 2026
b4ccdd9
Merge branch 'develop' into CXCDS-17219
c5346163 Feb 10, 2026
0fd7002
Trigger Build
c5346163 Feb 10, 2026
24d8300
Merge branch 'develop' into CXCDS-17219
FollowTheFlo Feb 10, 2026
e2e40f2
Merge branch 'develop' into CXCDS-17219
c5346163 Feb 12, 2026
9cd8428
Merge branch 'develop' into CXCDS-17219
c5346163 Feb 13, 2026
78b3a03
Remove unnecessary event
c5346163 Feb 13, 2026
da233e7
Add opt-in preventNavigationFocus flag to carousel component to fix S…
c5346163 Feb 13, 2026
c9f0b56
Merge branch 'develop' into CXCDS-17219
c5346163 Feb 18, 2026
0a59ffc
Merge branch 'develop' into CXCDS-17219
c5346163 Feb 18, 2026
6e8d95c
Trigger Build
c5346163 Feb 18, 2026
f34e30e
Merge branch 'develop' into CXCDS-17219
c5346163 Feb 19, 2026
05766ba
Merge branch 'develop' into CXCDS-17219
c5346163 Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ <h3 *ngIf="result.products?.length">
[template]="carouselItem"
itemWidth="160px"
(keybordEvent)="carouselEventPropagator($event)"
(mousedown)="preventDefault($event)"
Copy link
Contributor

@rmch91 rmch91 Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually this can be breaking change for customers, example:
Customer registered event listener, something like: this.el.nativeElement.addEventListener('focus', this.onFocus, true); and implement some custom logic on focus.
When you are adding (mousedown)="preventDefault($event)" it will not be triggered.

Copy link
Contributor

@Pucek9 Pucek9 Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rmch91 That's true, but the question that comes to mind is why would he do it in such a complicated way? If he extends the class, that forces him to have its own HTML structure (which will not be automatically updated from here). The fact that we cannot fix the behavior in his code - it's beyond our control if there is any customization, the question is only whether we are able to break something in his code/ui behavior this way?

Copy link
Contributor

@rmch91 rmch91 Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

User can do it without any customization of the component. just register an event listener on cx-carousel in app.component and apply his own logic.
After this change it will not work. So seems that it is breaking

Copy link
Contributor Author

@c5346163 c5346163 Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've made the fix opt-in via a preventNavigationFocus input flag (defaults to false), so it's only enabled in search-box and doesn't affect existing carousels or customer event listeners.

>
</cx-carousel>

Expand Down
7 changes: 1 addition & 6 deletions projects/storefrontlib/shared/components/carousel/carousel.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,7 @@ <h2 *ngIf="title">{{ title }}</h2>
<button
*ngIf="size < items.length"
class="next"
(click)="
$event.stopPropagation();
activeSlide > items.length - size - 1
? null
: (activeSlide = activeSlide + size)
"
(click)="onNextClick($event, size)"
[attr.aria-disabled]="activeSlide > items.length - size - 1"
[attr.aria-label]="'carousel.nextSlide' | cxTranslate"
[attr.title]="'carousel.nextSlide' | cxTranslate"
Expand Down
13 changes: 13 additions & 0 deletions projects/storefrontlib/shared/components/carousel/carousel.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,19 @@ export class CarouselComponent implements OnInit, OnChanges {
.getItemsPerSlide(this.el.nativeElement, this.itemWidth)
.pipe(tap(() => (this.activeSlide = 0)));
}
/**
* 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;
}
}

onItemKeydown(event: KeyboardEvent, size: number): void {
switch (event.key) {
Expand Down
Loading