Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(angular): set active segment button when dynamically changing items #29418

Merged
merged 3 commits into from
May 1, 2024
Merged

fix(angular): set active segment button when dynamically changing items #29418

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0f48160
fix(angular): set active segment button when dynamically changing items
sean-perkins Apr 29, 2024
5b8ea04
chore: document purpose of code
sean-perkins May 1, 2024
fd89c44
chore: try removing spaces since prettier won't
sean-perkins May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions core/src/components/segment/segment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,14 +141,6 @@ export class Segment implements ComponentInterface {
async componentDidLoad() {
this.setCheckedClasses();

/**
* If the value changes before watchers
* are setup, then the ionSelect watch callback
* will not fire. As a result, we manually
* fire this event when Select is loaded.
*/
this.ionSelect.emit({ value: this.value });

/**
* We need to wait for the buttons to all be rendered
* before we can scroll.
Expand Down Expand Up @@ -495,6 +487,15 @@ export class Segment implements ComponentInterface {
}
};

private onSlottedItemsChange = () => {
/**
* When the slotted segment buttons change we need to
* ensure that the new segment buttons are checked if
* the value matches the segment button value.
*/
this.valueChanged(this.value);
sean-perkins marked this conversation as resolved.
Show resolved Hide resolved
};

private getSegmentButton = (selector: 'first' | 'last' | 'next' | 'previous'): HTMLIonSegmentButtonElement | null => {
const buttons = this.getButtons().filter((button) => !button.disabled);
const currIndex = buttons.findIndex((button) => button === document.activeElement);
Expand Down Expand Up @@ -573,7 +574,7 @@ export class Segment implements ComponentInterface {
'segment-scrollable': this.scrollable,
})}
>
<slot></slot>
<slot onSlotchange={this.onSlottedItemsChange}></slot>
</Host>
);
}
Expand Down
Loading