diff --git a/BREAKING.md b/BREAKING.md
index 2260e43c78c..54df166e4ea 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -139,6 +139,14 @@ When using `interface="action-sheet"`, `ion-select` no longer assigns the `selec
Previously, the `selected` role was assigned only to the option matching the select's current value. Because the dismiss role mirrors the tapped button, this surfaced in just one case: re-selecting the already-selected option dismissed the action sheet with `role: "selected"` in `ionActionSheetDidDismiss`. Tapping any other option changed the value and dismissed with `role: ""`. Now that the role is no longer assigned, both cases dismiss with `role: undefined`. Apps that inspected this role to detect that a value was chosen, such as reading `role` from the underlying action sheet's `onDidDismiss` result, should listen for `ion-select`'s `ionChange` event instead, which emits the selected value when the selection changes.
+**`cancelText` Default Is Now Per-Interface**
+
+The default value of the `cancelText` property on `ion-select` now depends on the `interface`. It defaults to `'Ok'` for the `modal` interface and `'Cancel'` for the `alert` and `action-sheet` interfaces. Previously, `cancelText` defaulted to `'Cancel'` for every interface.
+
+The property type changed from `string` to `string | undefined`. When `cancelText` is left unset, the per-interface default is used. Setting `cancelText` to an explicit string continues to override the button text for all interfaces as before.
+
+Apps using the `modal` interface that relied on the cancel button reading `'Cancel'` should set `cancelText="Cancel"` to keep the previous text.
+
Framework Specific
Angular
diff --git a/core/api.txt b/core/api.txt
index 067b07e818c..6611aa3b298 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1680,7 +1680,7 @@ ion-segment-view,prop,swipeGesture,boolean,true,false,false
ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true
ion-select,shadow
-ion-select,prop,cancelText,string,'Cancel',false,false
+ion-select,prop,cancelText,string | undefined,undefined,false,false
ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true
ion-select,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
ion-select,prop,disabled,boolean,false,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 2d8a59f1903..452a82c9262 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3022,10 +3022,9 @@ export namespace Components {
}
interface IonSelect {
/**
- * The text to display on the cancel button.
- * @default 'Cancel'
+ * The text to display on the cancel button. Defaults to `'Cancel'` for the `alert` and `action-sheet` interfaces, and `'Ok'` for the `modal` interface.
*/
- "cancelText": string;
+ "cancelText"?: string;
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). This property is only available when using the modern select syntax.
*/
@@ -8205,8 +8204,7 @@ declare namespace LocalJSX {
}
interface IonSelect {
/**
- * The text to display on the cancel button.
- * @default 'Cancel'
+ * The text to display on the cancel button. Defaults to `'Cancel'` for the `alert` and `action-sheet` interfaces, and `'Ok'` for the `modal` interface.
*/
"cancelText"?: string;
/**
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 73fb6c59ac7..4ffcb484baf 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -94,8 +94,10 @@ export class Select implements ComponentInterface {
/**
* The text to display on the cancel button.
+ * Defaults to `'Cancel'` for the `alert` and `action-sheet`
+ * interfaces, and `'Ok'` for the `modal` interface.
*/
- @Prop() cancelText = 'Cancel';
+ @Prop() cancelText?: string;
/**
* The color to use from your application's color palette.
@@ -525,6 +527,18 @@ export class Select implements ComponentInterface {
return overlay;
}
+ /**
+ * Resolves the cancel button text, falling back to the
+ * per-interface default when `cancelText` is not set:
+ * `'Ok'` for the `modal` interface, `'Cancel'` otherwise.
+ */
+ private get interfaceCancelText(): string {
+ if (this.cancelText !== undefined) {
+ return this.cancelText;
+ }
+ return this.interface === 'modal' ? 'Ok' : 'Cancel';
+ }
+
private createOverlay(ev?: UIEvent): Promise {
let selectInterface = this.interface;
if (selectInterface === 'action-sheet' && this.multiple) {
@@ -609,7 +623,7 @@ export class Select implements ComponentInterface {
// Add "cancel" button
actionSheetButtons.push({
- text: this.cancelText,
+ text: this.interfaceCancelText,
role: 'cancel',
handler: () => {
this.ionCancel.emit();
@@ -783,7 +797,7 @@ export class Select implements ComponentInterface {
inputs: this.createAlertInputs(this.childOpts, inputType, this.value),
buttons: [
{
- text: this.cancelText,
+ text: this.interfaceCancelText,
role: 'cancel',
handler: () => {
this.ionCancel.emit();
@@ -830,7 +844,7 @@ export class Select implements ComponentInterface {
component: 'ion-select-modal',
componentProps: {
header: interfaceOptions.header,
- cancelText: this.cancelText,
+ cancelText: this.interfaceCancelText,
multiple,
value,
options: this.createOverlaySelectOptions(this.childOpts, value),
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png
index 43fcd9ef709..e1bd40b26c5 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png
index b25f9c98d2f..0077e636fc0 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png
index 85abf17ca89..6f7d8023a02 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png
index a75ada58efb..48bb008ed5e 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png
index 81dd78d1d86..70967455504 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png
index 5010cc499ea..d887c7a075f 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png differ