ionic-team / ionic-team/ionic-framework

feat: dismiss data in overlay button handler return

Open
#26,013 2 comments 0 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

It would be great if the `handler` function of an overlay button (e.g. `IonActionSheetButton`) would allow overlay data as a return value.

### Describe the Use Case

I have an `IonActionSheet` with three buttons that resolve some data from a promise. When the data is resolved and is not null, the IonActionSheet should dismiss with given data in the `OverlayEventDetail`. If the data is null, I do not want to close the ActionSheet by returning false in the handler method.

At the moment I can not return data inside the handler value except by using the dismiss method of the created action sheet itself.

### Describe Preferred Solution

The `handler()` method on an `IonActionSheetButton` should accept OverlayEventDetail object as return value

```
public async browseFile(): Promise {
const actionSheet = await this.actionSheetController.create({
buttons: [
{
text: 'Scan Document',
role: 'scanner',
handler: async () => {
const file = await this.browseScanner();
return file ? {file} : false;
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
await actionSheet.present();
const {data, role} = await actionSheet.onWillDismiss<{file: SandboxFile}>();
return data?.file || null;
}
```

### Describe Alternatives

_No response_

### Related Code
At the moment I have to solve the problem with using the `dismiss()` method of the action sheet element. But this results in the buttons role attribute being ignored because the dismiss is triggered by the `dismiss()` method and not via the handler default.

```
public async browseFile(): Promise {
const actionSheet = await this.actionSheetController.create({
buttons: [
{
text: 'Scan Document',
role: 'scanner',
handler: async () => {
const file = await this.browseScanner();
if (!file) {
// if file is null or undefined, I do not want to close the action sheet
return false;
}
// dismissing in handler needs to be done with via the action sheet object
await actionSheet.dismiss({file});
}
},
{
text: 'Camera',
role: 'camera',
handler: async () => {
const file = await this.browseCamera();
if (!file) {
return false;
}
await actionSheet.dismiss({file});
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
await actionSheet.present();
const {data, role} = await actionSheet.onWillDismiss<{file: SandboxFile}>();
return data?.file || null;
}
```

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.