From 06b828b4ffb12b076b0805274f53fa158ee65c5a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 19 Feb 2020 09:40:10 -0500
Subject: [PATCH] fix(segment): inner div no longer interferes with click
 events (#20522)

fixes #20381
---
 .../segment-button/segment-button.scss        |  4 ++-
 .../components/segment/test/basic/index.html  | 30 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index 1043095746..824e621c3d 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -72,6 +72,8 @@
   white-space: nowrap;
 
   font-kerning: none;
+
+  cursor: pointer;
 }
 
 .button-native {
@@ -107,7 +109,7 @@
   background: transparent;
 
   contain: content;
-  cursor: pointer;
+  pointer-events: none;
 
   overflow: hidden;
 
diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
index f678bc896e..78e83f82d6 100644
--- a/core/src/components/segment/test/basic/index.html
+++ b/core/src/components/segment/test/basic/index.html
@@ -164,6 +164,18 @@
           </ion-segment-button>
         </ion-segment>
 
+        <ion-segment>
+          <ion-segment-button value="active">
+            <div class="square red"></div>
+          </ion-segment-button>
+          <ion-segment-button name="dynamicAttrDisable">
+            <div class="square green"></div>
+          </ion-segment-button>
+          <ion-segment-button value="inactive">
+            <div class="square blue"></div>
+          </ion-segment-button>
+        </ion-segment>
+
         <!-- Dynamic Buttons -->
         <ion-segment id="dynamicButtons"></ion-segment>
       </div>
@@ -236,6 +248,24 @@
     </ion-content>
 
     <style>
+      .square {
+        width: 20px;
+        height: 20px;
+        background: black;
+      }
+
+      .square.red {
+        background: red;
+      }
+
+      .square.green {
+        background: green;
+      }
+
+      .square.blue {
+        background: blue;
+      }
+
       ion-content ion-segment {
         margin-bottom: 10px;
       }