Skip to content

fix(action-sheet): correct some cancelable misbehaviors #2491

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

Merged
jcesarmobile merged 3 commits into from
Mar 12, 2026
Merged

fix(action-sheet): correct some cancelable misbehaviors #2491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
29dcf91
fix(action-sheet): correct some cancelable misbehaviors
jcesarmobile Mar 11, 2026
255916e
fmt
jcesarmobile Mar 11, 2026
523c71c
change cancelable ios note
jcesarmobile Mar 12, 2026
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
30 changes: 15 additions & 15 deletions action-sheet/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,20 +84,20 @@ to select.

#### ShowActionsResult

| Prop | Type | Description | Since |
| -------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| **`index`** | <code>number</code> | The index of the clicked option (Zero-based), or -1 if the sheet was canceled. On iOS, if there is a button with <a href="#actionsheetbuttonstyle">ActionSheetButtonStyle.Cancel</a>, and user clicks outside the sheet, the index of the cancel option is returned | 1.0.0 |
| **`canceled`** | <code>boolean</code> | True if sheet was canceled by user; False otherwise On Web, requires having @ionic/pwa-elements version 3.4.0 or higher. | 8.1.0 |
| Prop | Type | Description | Since |
| -------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| **`index`** | <code>number</code> | The index of the clicked option (Zero-based), or -1 if the Action Sheet was canceled. On iOS, if there is a button with <a href="#actionsheetbuttonstyle">ActionSheetButtonStyle.Cancel</a>, and user clicks outside the Action Sheet, the index of the Cancel button is returned. | 1.0.0 |
| **`canceled`** | <code>boolean</code> | True if the Action Sheet was canceled by user; False otherwise. On Web, requires having @ionic/pwa-elements version 3.4.0 or higher. | 8.1.0 |


#### ShowActionsOptions

| Prop | Type | Description | Since |
| ---------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| **`title`** | <code>string</code> | The title of the Action Sheet. | 1.0.0 |
| **`message`** | <code>string</code> | A message to show under the title. This option is only supported on iOS. | 1.0.0 |
| **`options`** | <code>ActionSheetButton[]</code> | Options the user can choose from. | 1.0.0 |
| **`cancelable`** | <code>boolean</code> | If true, sheet is canceled when clicked outside; If false, it is not. By default, false. Not available on iOS, sheet is always cancelable by clicking outside of it. On Web, requires having @ionic/pwa-elements version 3.4.0 or higher. | 8.1.0 |
| Prop | Type | Description | Default | Since |
| ---------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----- |
| **`title`** | <code>string</code> | The title of the Action Sheet. | | 1.0.0 |
| **`message`** | <code>string</code> | A message to show under the title. This option is only supported on iOS. | | 1.0.0 |
| **`options`** | <code>ActionSheetButton[]</code> | Options the user can choose from. | | 1.0.0 |
| **`cancelable`** | <code>boolean</code> | If true, the Action Sheet is canceled when clicked outside; If false, it is not. On iOS, it's not available if there is a button with <a href="#actionsheetbuttonstyle">ActionSheetButtonStyle.Cancel</a>, or on iOS 26+. In those cases, the Action Sheet is always cancelable by clicking outside of it. On Web, requires having @ionic/pwa-elements version 3.4.0 or higher. | <code>false</code> | 8.1.0 |


#### ActionSheetButton
Expand All @@ -114,10 +114,10 @@ to select.

#### ActionSheetButtonStyle

| Members | Value | Description | Since |
| ----------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------- | ----- |
| **`Default`** | <code>'DEFAULT'</code> | Default style of the option. | 1.0.0 |
| **`Destructive`** | <code>'DESTRUCTIVE'</code> | Style to use on destructive options. | 1.0.0 |
| **`Cancel`** | <code>'CANCEL'</code> | Style to use on the option that cancels the Action Sheet. If used, should be on the latest availabe option. | 1.0.0 |
| Members | Value | Description | Since |
| ----------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| **`Default`** | <code>'DEFAULT'</code> | Default style of the option. | 1.0.0 |
| **`Destructive`** | <code>'DESTRUCTIVE'</code> | Style to use on destructive options. | 1.0.0 |
| **`Cancel`** | <code>'CANCEL'</code> | Style to use on the option that cancels the Action Sheet. If used, should be on the latest available option. On iOS 26+ is not displayed, the Action Sheet is cancelable by tapping outside. | 1.0.0 |

</docgen-api>
4 changes: 1 addition & 3 deletions ...on-sheet/android/src/main/java/com/capacitorjs/plugins/actionsheet/ActionSheetPlugin.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,7 @@ public void showActions(final PluginCall call) {
implementation.setOnCancelListener(() -> resolve(call, -1));
}
implementation.setOnSelectedListener((index) -> {
JSObject ret = new JSObject();
ret.put("index", index);
call.resolve(ret);
resolve(call, index);
implementation.dismiss();
});
implementation.show(getActivity().getSupportFragmentManager(), "capacitorModalsActionSheet");
Expand Down
23 changes: 10 additions & 13 deletions action-sheet/ios/Sources/ActionSheetPlugin/ActionSheetPlugin.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,10 @@ public class ActionSheetPlugin: CAPPlugin, CAPBridgedPlugin, UIAdaptivePresentat
buttonStyle = .cancel
}
let action = UIAlertAction(title: title, style: buttonStyle, handler: { [weak self] (_) in
if buttonStyle == .cancel {
call.actionSheetCanceled()
} else {
call.resolve([
"index": index,
"canceled": false
])
}
call.resolve([
"index": index,
"canceled": buttonStyle == .cancel
])
self?.currentCall = nil
})
alertActions.append(action)
Expand All @@ -51,27 +47,28 @@ public class ActionSheetPlugin: CAPPlugin, CAPBridgedPlugin, UIAdaptivePresentat
self?.setCenteredPopover(alertController)
self?.bridge?.viewController?.present(alertController, animated: true) {
if !hasCancellableButton {
self?.setupCancelationListerners(alertController, call)
self?.setupCancelationListeners(alertController, call)
}
}
}
}
}

private func setupCancelationListerners(_ alertController: UIAlertController, _ call: CAPPluginCall) {
private func setupCancelationListeners(_ alertController: UIAlertController, _ call: CAPPluginCall) {
let cancelable = call.getBool("cancelable", false)
if #available(iOS 26, *) {
self.currentCall = call
alertController.presentationController?.delegate = self
} else {
} else if cancelable {
// For iOS versions below 26, setting the presentation controller delegate would result in a crash
// "Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'The presentation controller of an alert controller presenting as an alert must not have its delegate modified"
// Hence, the alternative by adding a gesture recognizer (which only works for iOS versions below 26)
let gestureRecognizer = TapGestureRecognizerWithClosure {
alertController.dismiss(animated: true, completion: nil)
call.actionSheetCanceled()
}
let backroundView = alertController.view.superview?.subviews[0]
backroundView?.addGestureRecognizer(gestureRecognizer)
let backgroundView = alertController.view.superview?.subviews[0]
backgroundView?.addGestureRecognizer(gestureRecognizer)
}
}

Expand Down
15 changes: 9 additions & 6 deletions action-sheet/src/definitions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,14 @@ export interface ShowActionsOptions {
options: ActionSheetButton[];

/**
* If true, sheet is canceled when clicked outside; If false, it is not. By default, false.
* If true, the Action Sheet is canceled when clicked outside; If false, it is not.
*
* Not available on iOS, sheet is always cancelable by clicking outside of it.
* On iOS, it's not available if there is a button with ActionSheetButtonStyle.Cancel, or on iOS 26+.
* In those cases, the Action Sheet is always cancelable by clicking outside of it.
*
* On Web, requires having @ionic/pwa-elements version 3.4.0 or higher.
*
* @default false
* @since 8.1.0
*/
cancelable?: boolean;
Expand All @@ -51,7 +53,8 @@ export enum ActionSheetButtonStyle {

/**
* Style to use on the option that cancels the Action Sheet.
* If used, should be on the latest availabe option.
* If used, should be on the latest available option.
* On iOS 26+ is not displayed, the Action Sheet is cancelable by tapping outside.
*
* @since 1.0.0
*/
Expand Down Expand Up @@ -87,15 +90,15 @@ export interface ActionSheetButton {

export interface ShowActionsResult {
/**
* The index of the clicked option (Zero-based), or -1 if the sheet was canceled.
* The index of the clicked option (Zero-based), or -1 if the Action Sheet was canceled.
*
* On iOS, if there is a button with ActionSheetButtonStyle.Cancel, and user clicks outside the sheet, the index of the cancel option is returned
* On iOS, if there is a button with ActionSheetButtonStyle.Cancel, and user clicks outside the Action Sheet, the index of the Cancel button is returned.
*
* @since 1.0.0
*/
index: number;
/**
* True if sheet was canceled by user; False otherwise
* True if the Action Sheet was canceled by user; False otherwise.
*
* On Web, requires having @ionic/pwa-elements version 3.4.0 or higher.
*
Expand Down
2 changes: 1 addition & 1 deletion action-sheet/src/web.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@

export class ActionSheetWeb extends WebPlugin implements ActionSheetPlugin {
async showActions(options: ShowActionsOptions): Promise<ShowActionsResult> {
return new Promise<ShowActionsResult>((resolve, _reject) => {

Check warning on line 7 in action-sheet/src/web.ts

View workflow job for this annotation

GitHub Actions / lint (action-sheet) 

'_reject' is defined but never used
let actionSheet: any = document.querySelector('pwa-action-sheet');
if (!actionSheet) {
actionSheet = document.createElement('pwa-action-sheet');
document.body.appendChild(actionSheet);
}
actionSheet.header = options.title;
actionSheet.cancelable = options.cancelable;
actionSheet.cancelable = options.cancelable ?? false;
actionSheet.options = options.options;
actionSheet.addEventListener('onSelection', async (e: any) => {
const selection = e.detail;
Expand Down
Loading