diff --git a/packages/core/src/components/segment-button/segment-button.tsx b/packages/core/src/components/segment-button/segment-button.tsx index 4b874e4a7c..72788f3c1b 100644 --- a/packages/core/src/components/segment-button/segment-button.tsx +++ b/packages/core/src/components/segment-button/segment-button.tsx @@ -14,7 +14,7 @@ export class SegmentButton { /** * @output {SegmentButtonEvent} Emitted when the segment button is clicked. */ - @Event() ionClick: EventEmitter; + @Event() ionClick: EventEmitter; @State() activated: boolean = false; @@ -62,7 +62,7 @@ export class SegmentButton { clearTimeout(this.styleTmr); this.styleTmr = setTimeout(() => { - this.ionClick.emit({ segmentButton: this }); + this.ionClick.emit(); }); } @@ -105,9 +105,10 @@ export class SegmentButton { } } - -export interface SegmentButtonEvent extends Event { - detail: { - segmentButton: SegmentButton; - }; +export interface SegmentButtonEvent extends CustomEvent { + detail: SegmentButtonEventDetail; +} + +export interface SegmentButtonEventDetail { + } diff --git a/packages/core/src/components/segment/segment.tsx b/packages/core/src/components/segment/segment.tsx index c2bc2ad395..904e29cb56 100644 --- a/packages/core/src/components/segment/segment.tsx +++ b/packages/core/src/components/segment/segment.tsx @@ -20,7 +20,7 @@ export class Segment { /** * @output {Event} Emitted when the value property has changed. */ - @Event() ionChange: EventEmitter; + @Event() ionChange: EventEmitter; /** * @input {string} The color to use from your Sass `$colors` map. @@ -69,13 +69,13 @@ export class Segment { @Listen('ionClick') segmentClick(ev: CustomEvent) { - let selectedButton = ev.detail.segmentButton; + const selectedButton = ev.target as HTMLIonSegmentButtonElement; this.value = selectedButton.value; this.selectButton(this.value); // TODO should this move to valueChanged - this.ionChange.emit({ segment: this }); + this.ionChange.emit(); } selectButton(val: string) { @@ -101,8 +101,9 @@ export class Segment { } } -export interface SegmentEvent extends Event { - detail: { - segment: Segment; - }; +export interface SegmentEvent extends CustomEvent { + detail: SegmentEventDetail; +} + +export interface SegmentEventDetail { } diff --git a/packages/core/src/components/segment/test/basic/index.html b/packages/core/src/components/segment/test/basic/index.html index 290a6bfc94..74a540581c 100644 --- a/packages/core/src/components/segment/test/basic/index.html +++ b/packages/core/src/components/segment/test/basic/index.html @@ -8,7 +8,7 @@ - + @@ -19,7 +19,7 @@ - + Paid @@ -111,6 +111,14 @@ dynamicAttrElem.setAttribute('value', 'active'); } } + + async function listenForEvent() { + const ionSegmentElement = document.querySelector('ion-segment.event-tester'); + await ionSegmentElement.componentOnReady(); + ionSegmentElement.addEventListener('ionChange', (event) => { + console.log('event.target: ', event.target.value); + }); + }