fix(segment): segment functions properly on android 5 (#20554)

fixes #20466
ionic-team · Feb 24, 2020 · 0224bed · 0224bed
1 parent cefb08f
commit 0224bed
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
@@ -171,9 +171,10 @@ export class Segment implements ComponentInterface {
     if (!useRippleEffect) { return; }
 
     const buttons = this.getButtons();
-    const checked = buttons.find(button => button.value === this.value);
+    const checked = buttons.find(button => button.value === this.value)!;
 
-    const ripple = checked!.shadowRoot!.querySelector('ion-ripple-effect');
+    const root = checked.shadowRoot || checked;
+    const ripple = root.querySelector('ion-ripple-effect');
 
     if (!ripple) { return; }
 
@@ -223,7 +224,8 @@ export class Segment implements ComponentInterface {
   }
 
   private getIndicator(button: HTMLIonSegmentButtonElement): HTMLDivElement | null {
-    return button.shadowRoot && button.shadowRoot.querySelector('.segment-button-indicator');
+    const root = button.shadowRoot || button;
+    return root.querySelector('.segment-button-indicator');
   }
 
   private checkButton(previous: HTMLIonSegmentButtonElement, current: HTMLIonSegmentButtonElement) {
@@ -302,7 +304,8 @@ export class Segment implements ComponentInterface {
     // gesture event and the Y coordinate of the starting element, since the gesture
     // can move up and down off of the segment
     const currentX = detail.currentX;
-    const previousY = rect.y;
+
+    const previousY = rect.top + (rect.height / 2);
     const nextEl = document.elementFromPoint(currentX, previousY) as HTMLIonSegmentButtonElement;
 
     const decreaseIndex = isRTL ? currentX > (left + width) : currentX < left;

diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
@@ -75,6 +75,18 @@
       </ion-toolbar>
     </ion-header>
 
+    <ion-segment value="segment">
+      <ion-segment-button value="segment">
+        Segment
+      </ion-segment-button>
+      <ion-segment-button value="outside">
+        Outside
+      </ion-segment-button>
+      <ion-segment-button value="content">
+        Content
+      </ion-segment-button>
+    </ion-segment>
+
     <ion-content>
       <div class="ion-padding">
         <ion-segment>