From ad6b1301cf8528f7c9ad3c52730f01861117b380 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 11 Apr 2023 14:00:23 -0500
Subject: [PATCH] fix(segment): segment disables segment buttons created
 asyncronously (#27155)

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Segment buttons are only disabled when the segment's `disabled` property
changes. This means that segment buttons added to the segment async
don't have their `disabled` state inited correctly.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: Resolves
https://github.com/ionic-team/ionic-framework/issues/25396


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Segment buttons now check if their parent segment is `disabled` when
added to the DOM.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
---
 .../segment-button/segment-button.tsx          | 12 +++++++++---
 .../components/segment/test/segment.spec.ts    | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 core/src/components/segment/test/segment.spec.ts

diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index a1cf1af5d5..30dadfc9ad 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -38,7 +38,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
   /**
    * If `true`, the user cannot interact with the segment button.
    */
-  @Prop() disabled = false;
+  @Prop({ mutable: true }) disabled = false;
 
   /**
    * Set the layout of the text and icon in the segment.
@@ -92,8 +92,14 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
   };
 
   private updateState = () => {
-    if (this.segmentEl) {
-      this.checked = this.segmentEl.value === this.value;
+    const { segmentEl } = this;
+
+    if (segmentEl) {
+      this.checked = segmentEl.value === this.value;
+
+      if (segmentEl.disabled) {
+        this.disabled = true;
+      }
     }
   };
 
diff --git a/core/src/components/segment/test/segment.spec.ts b/core/src/components/segment/test/segment.spec.ts
new file mode 100644
index 0000000000..fe3a55343c
--- /dev/null
+++ b/core/src/components/segment/test/segment.spec.ts
@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { SegmentButton } from '../../segment-button/segment-button';
+import { Segment } from '../segment';
+
+it('should disable segment buttons added to disabled segment async', async () => {
+  const page = await newSpecPage({
+    components: [Segment, SegmentButton],
+    html: `<ion-segment disabled="true"></ion-segment>`,
+  });
+
+  const segment = page.body.querySelector('ion-segment');
+  segment.innerHTML = `<ion-segment-button>Segment Button</ion-segment-button>`;
+  await page.waitForChanges();
+
+  const segmentButton = page.body.querySelector('ion-segment-button');
+  expect(segmentButton.disabled).toBe(true);
+});