From 01f99597f71b35a60a70f6d76c1e3e1917978d6d Mon Sep 17 00:00:00 2001
From: GlenOttley <80951896+GlenOttley@users.noreply.github.com>
Date: Wed, 24 May 2023 10:44:37 -0400
Subject: [PATCH] fix(segment): remove duplicate ripple effect on pointerup
 (#27448)

Issue number: resolves #27338

---------

## What is the current behavior?
Segment button on `md` mode shows two ripple effects: once on
pointerdown and again on pointerup

## What is the new behavior?
Segment button on `md` mode only shows a ripple effect on pointerdown

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: Brandy Carney <brandy@ionic.io>
---
 core/src/components/segment/segment.tsx | 34 +------------------------
 1 file changed, 1 insertion(+), 33 deletions(-)

diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index e242a1d76f..00de52e31f 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -1,11 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
 
-import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
 import type { Gesture, GestureDetail } from '../../utils/gesture';
-import { pointerCoord } from '../../utils/helpers';
 import { isRTL } from '../../utils/rtl';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
@@ -194,14 +192,10 @@ export class Segment implements ComponentInterface {
   onEnd(detail: GestureDetail) {
     this.setActivated(false);
 
-    const checkedValidButton = this.setNextIndex(detail, true);
+    this.setNextIndex(detail, true);
 
     detail.event.stopImmediatePropagation();
 
-    if (checkedValidButton) {
-      this.addRipple(detail);
-    }
-
     const value = this.value;
     if (value !== undefined) {
       if (this.valueBeforeGesture !== value) {
@@ -230,32 +224,6 @@ export class Segment implements ComponentInterface {
     return this.getButtons().find((button) => button.value === this.value);
   }
 
-  /**
-   * The gesture blocks the segment button ripple. This
-   * function adds the ripple based on the checked segment
-   * and where the cursor ended.
-   */
-  private addRipple(detail: GestureDetail) {
-    const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
-    if (!useRippleEffect) {
-      return;
-    }
-
-    const buttons = this.getButtons();
-    const checked = buttons.find((button) => button.value === this.value)!;
-
-    const root = checked.shadowRoot || checked;
-    const ripple = root.querySelector('ion-ripple-effect');
-
-    if (!ripple) {
-      return;
-    }
-
-    const { x, y } = pointerCoord(detail.event);
-
-    ripple.addRipple(x, y).then((remove) => remove());
-  }
-
   /*
    * Activate both the segment and the buttons
    * due to a bug with ::slotted in Safari