Merge pull request #2400 from kirbydesign/bug/2388-badge-click-remove…

…s-focus Avoid removing focus from Segmented Control on embedded badge click
kirbydesign · Aug 4, 2022 · 78f8cad · 78f8cad
2 parents 32c47d2 + f9ab6bb
commit 78f8cad
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/libs/designsystem/src/lib/components/segmented-control/segmented-control.component.html b/libs/designsystem/src/lib/components/segmented-control/segmented-control.component.html
@@ -3,7 +3,7 @@
   [value]="value?.id"
   [scrollable]="disableChangeOnSwipe"
   (ionChange)="onSegmentSelect($event.detail.value)"
-  (click)="preventWrapperClick($event)"
+  (click)="preventOutsideClick($event)"
 >
   <div *ngFor="let item of items" class="segment-btn-wrapper">
     <ion-segment-button [value]="item.id">{{ item.text }}</ion-segment-button>

diff --git a/libs/designsystem/src/lib/components/segmented-control/segmented-control.component.ts b/libs/designsystem/src/lib/components/segmented-control/segmented-control.component.ts
@@ -20,9 +20,14 @@ export enum SegmentedControlMode {
 export class SegmentedControlComponent {
   constructor(private iconRegistryService: IconRegistryService) {}
 
-  preventWrapperClick(event: Event) {
+  /**
+   * Ensure that the click actually did originate from within the segment-button.
+   * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.
+   */
+  preventOutsideClick(event: TouchEvent) {
     if (event.target instanceof HTMLElement) {
-      if (event.target.classList.contains('segment-btn-wrapper')) {
+      const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');
+      if (!targetIsInSegmentBtn) {
         event.stopImmediatePropagation();
       }
     }