diff --git a/core/api.txt b/core/api.txt index 98e4f3bffc..4527f01d24 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1610,7 +1610,8 @@ ion-segment-button,part,native ion-segment-content,shadow ion-segment-view,shadow -ion-segment-view,method,setContent,setContent(id: string) => Promise +ion-segment-view,prop,disabled,boolean,false,false,false +ion-segment-view,method,setContent,setContent(id: string, smoothScroll?: boolean) => Promise ion-select,shadow ion-select,prop,cancelText,string,'Cancel',false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index d299b4cb3f..9dc45dc769 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2723,7 +2723,7 @@ export namespace Components { * If `true`, the segment view cannot be interacted with. */ "disabled": boolean; - "setContent": (id: string) => Promise; + "setContent": (id: string, smoothScroll?: boolean) => Promise; } interface IonSelect { /** diff --git a/core/src/components/segment-view/segment-view.tsx b/core/src/components/segment-view/segment-view.tsx index ad82264026..81678a33ed 100644 --- a/core/src/components/segment-view/segment-view.tsx +++ b/core/src/components/segment-view/segment-view.tsx @@ -37,7 +37,7 @@ export class SegmentView implements ComponentInterface { } @Method() - async setContent(id: string) { + async setContent(id: string, smoothScroll = true) { const contents = this.getSegmentContents(); const index = contents.findIndex((content) => content.id === id); @@ -47,7 +47,7 @@ export class SegmentView implements ComponentInterface { this.el.scrollTo({ top: 0, left: index * contentWidth, - behavior: 'smooth', + behavior: smoothScroll ? 'smooth' : 'auto', }); } diff --git a/core/src/components/segment-view/test/basic/index.html b/core/src/components/segment-view/test/basic/index.html index e34a5e24d7..093d1d064b 100644 --- a/core/src/components/segment-view/test/basic/index.html +++ b/core/src/components/segment-view/test/basic/index.html @@ -15,15 +15,25 @@ @@ -38,14 +48,42 @@ - - + + + No + + + Value + + + + + No + Value + + + + + All + + + Favorites + + + + + All + Favorites + + + + Paid - + Free - + Top @@ -57,14 +95,14 @@ - - + + Bookmarks - + Reading List - + Shared Links diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index f991ef18ba..34ae04099c 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -180,6 +180,10 @@ export class Segment implements ComponentInterface { if (this.disabled) { this.disabledChanged(); } + + // Update segment view based on the initial value, + // but do not animate the scroll + this.updateSegmentView(false); } onStart(detail: GestureDetail) { @@ -322,11 +326,11 @@ export class Segment implements ComponentInterface { /** * Finds the related segment view and sets its current content * based on the selected segment button. This method - * should be called only after the gesture is completed - * (if dragging between segments) or when a segment button - * is clicked directly. + * should be called on initial load of the segment, + * after the gesture is completed (if dragging between segments) + * and when a segment button is clicked directly. */ - private updateSegmentView() { + private updateSegmentView(smoothScroll = true) { const buttons = this.getButtons(); const button = buttons.find((btn) => btn.value === this.value); @@ -340,7 +344,7 @@ export class Segment implements ComponentInterface { const segmentView = content?.closest('ion-segment-view'); if (segmentView) { - segmentView.setContent(button.contentId); + segmentView.setContent(button.contentId, smoothScroll); } }