From b94bec20deef2b19ac117d192d5931ee50d0c0ed Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Oct 2024 18:05:17 -0400
Subject: [PATCH] fix(segment): update segment content to disabled when button
 is

---
 .../segment-button/segment-button.tsx         | 21 +++++++++++++++++++
 .../components/segment-view/segment-view.tsx  |  2 ++
 .../segment-view/test/disabled/index.html     |  8 +++----
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index a92fcbbd31..004c853a7e 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -72,6 +72,27 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
       addEventListener(segmentEl, 'ionSelect', this.updateState);
       addEventListener(segmentEl, 'ionStyle', this.updateStyle);
     }
+
+    // Return if there is no contentId defined
+    if (!this.contentId) return;
+
+    // Attempt to find the Segment Content by its contentId
+    const segmentContent = document.getElementById(this.contentId) as HTMLIonSegmentContentElement | null;
+
+    // If no associated Segment Content exists, log an error and return
+    if (!segmentContent) {
+      console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+      return;
+    }
+
+    // Ensure the found element is a valid ION-SEGMENT-CONTENT
+    if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
+      console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
+      return;
+    }
+
+    // Set the disabled state of the Segment Content based on the button's disabled state
+    segmentContent.disabled = this.disabled;
   }
 
   disconnectedCallback() {
diff --git a/core/src/components/segment-view/segment-view.tsx b/core/src/components/segment-view/segment-view.tsx
index 75a20419c8..d7a47b7191 100644
--- a/core/src/components/segment-view/segment-view.tsx
+++ b/core/src/components/segment-view/segment-view.tsx
@@ -82,6 +82,8 @@ export class SegmentView implements ComponentInterface {
     }
 
     // Update active content ID and scroll to the segment content
+    // TODO this is erroring because all of the segment contents are disabled
+    // in the last example
     this.activeContentId = segmentContent.id;
     this.setContent(segmentContent.id);
 
diff --git a/core/src/components/segment-view/test/disabled/index.html b/core/src/components/segment-view/test/disabled/index.html
index d5a3cbb3f7..dd30d3c38c 100644
--- a/core/src/components/segment-view/test/disabled/index.html
+++ b/core/src/components/segment-view/test/disabled/index.html
@@ -60,7 +60,7 @@
           </ion-segment-button>
         </ion-segment>
         <ion-segment-view>
-          <ion-segment-content disabled id="all">All</ion-segment-content>
+          <ion-segment-content id="all">All</ion-segment-content>
           <ion-segment-content id="favorites">Favorites</ion-segment-content>
         </ion-segment-view>
 
@@ -77,7 +77,7 @@
         </ion-segment>
         <ion-segment-view>
           <ion-segment-content id="paid">Paid</ion-segment-content>
-          <ion-segment-content disabled id="free">Free</ion-segment-content>
+          <ion-segment-content id="free">Free</ion-segment-content>
           <ion-segment-content id="top">Top</ion-segment-content>
         </ion-segment-view>
 
@@ -97,8 +97,8 @@
         </ion-segment>
         <ion-segment-view>
           <ion-segment-content id="a">a</ion-segment-content>
-          <ion-segment-content disabled id="b">b</ion-segment-content>
-          <ion-segment-content disabled id="c">c</ion-segment-content>
+          <ion-segment-content id="b">b</ion-segment-content>
+          <ion-segment-content id="c">c</ion-segment-content>
           <ion-segment-content id="d">d</ion-segment-content>
         </ion-segment-view>