bug: stacked cancel button should appear last in ios alert

[yudateNoriyuki]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When button names are long, the order of alert buttons in iOS is the reverse of that in Android.

Expected Behavior

The order of iOS should be the same as Android.

Steps to Reproduce

1. I see an alert for https://ionicframework.com/docs/ja/api/alert#buttons
2. Edit the html and name the 'Cancel' button 'CancelCancel (Buttons are aligned vertically)
3. Compare iOS and MD.

iOS

MD

Code Reproduction URL

No response

Ionic Info

Additional Information

plz look at

MD

https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/alert.md.vars.scss#L122

iOS

https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/alert.ios.vars.scss#L129

The differences in properties affect this sort order.

[liamdebeasi]

Thanks for the report. I can reproduce this behavior.

For stacked buttons in Material Design alerts, the confirming action should appear above the cancelling action: https://www.material.io/components/dialogs#anatomy (See "Stacked full-width buttons" at the bottom). This is what is happening right now in Ionic: https://stackblitz.com/edit/angular-h8ajiu?file=src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fexample.component.html

For stacked buttons in iOS alerts, the cancelling action should always appear last. The non-cancelling actions appear in the order they were passed. Here is an example of native iOS:

Related Swift UI code:

.alert("Important message", isPresented: $showingAlert) {
  Button("Cancel Cancel", role: .cancel) { }
  Button("Regular Button") { }
  Button("Delete Delete", role: .destructive) { }
}

This is different from inline buttons where the cancelling action should always appear first.

---

To summarize, we need to make the following change:

1. Stacked buttons on iOS should always render the "cancel" button last. All other buttons should render the order in which they were presented.

[yudateNoriyuki]

@liamdebeasi
Thanks for the reply.
If I keep waiting, will the iOS stack button be fixed?

[liamdebeasi]

We are interested in fixing this issue. However, I do not have a timeline of when it will be fixed.