diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 30dadfc9ad..b8629e8999 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -1,5 +1,5 @@ import type { ComponentInterface } from '@stencil/core'; -import { Component, Element, Host, Prop, Method, State, forceUpdate, h } from '@stencil/core'; +import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h } from '@stencil/core'; import { getIonMode } from '../../global/ionic-global'; import type { ButtonInterface } from '../../utils/element-interface'; @@ -54,6 +54,10 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { * The value of the segment button. */ @Prop() value: string = 'ion-sb-' + ids++; + @Watch('value') + valueChanged() { + this.updateState(); + } connectedCallback() { const segmentEl = (this.segmentEl = this.el.closest('ion-segment')); diff --git a/core/src/components/segment/test/segment.spec.ts b/core/src/components/segment/test/segment.spec.ts index fe3a55343c..18f5566311 100644 --- a/core/src/components/segment/test/segment.spec.ts +++ b/core/src/components/segment/test/segment.spec.ts @@ -16,3 +16,23 @@ it('should disable segment buttons added to disabled segment async', async () => const segmentButton = page.body.querySelector('ion-segment-button'); expect(segmentButton.disabled).toBe(true); }); + +it('should set checked state when value is set asynchronously', async () => { + const page = await newSpecPage({ + components: [Segment, SegmentButton], + html: ` + + First + + `, + }); + + const segmentButton = page.root.querySelector('ion-segment-button'); + + expect(segmentButton.classList.contains('segment-button-checked')).toBe(false); + + segmentButton.value = 'first'; + await page.waitForChanges(); + + expect(segmentButton.classList.contains('segment-button-checked')).toBe(true); +});