ionic-team / ionic-team/ionic-framework
feat: customize where modal is appended to
- 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
Specifying the parent component for a modal.
Similar requests:
https://github.com/ionic-team/ionic-framework/issues/22689
https://github.com/ionic-team/ionic-framework/issues/23250
### Describe the Use Case
I'm attempting to use the new sheet modal within a map UI. The problem is, the map is not the only feature of my app - it's a "tab" within my app.
If I launch a sheet modal within the map tab, it covers my tab bar. It'd be nice to be able to tie the sheet model to that specific tab, so that users can still navigate tabs while having a location / sheet modal active on the map tab.
### Describe Preferred Solution
Perhaps there could be a ModalOption to allow for specifying the parent component, which by default would be `ion-app`?
### Describe Alternatives
I'm not aware of any other way to do this within the current framework version 6.RC.2
### Related Code
https://github.com/ionic-team/ionic-framework/blob/61be8aa140c38338b94b2234d732bab67e431093/core/src/utils/overlays.ts#L59-L60
### Additional Information
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.