ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

bug: angular, handleBehavior can't be use on modal creation with the ModalController #25820

Closed jdupuis closed 2 years ago

jdupuis commented 2 years ago

Prerequisites

Ionic Framework Version

Current Behavior

In Ionic 6.2.0+ (Angular), it's impossible to use the handleBehavior when a modal is created with the ModalController because handleBehavior doesn't exist in type ModalOptions.

Expected Behavior

No errors on app build when the property handleBehavior is used on modal creation with the Modal Controller.

To solve that, add the property handleBehavior in the ModalOptions interface in dist/types/components/modal/modal-interface.d.ts.

Thanks !

Steps to Reproduce

  1. create a blank Ionic 6 app (angular)
  2. create a new component (ex : TestSheetModalComponent) ionic g component components/TestSheetModalComponent
  3. create a new page (ex : TestSheetModalPage) ionic g page pages/TestSheetModalPage
  4. Inject the modalController in this page and create in the ngOnInit method a new modal with the modalController injected, like this :
    
    import {Component, OnInit} from '@angular/core';
    import {ModalController} from '@ionic/angular';
    import {TestSheetModalComponent} from '../../components/test-sheet-modal/ test-sheet-modal.component';

@Component({ selector: 'app-test-sheet-modal-page', templateUrl: './test-sheet-modal-page.page.html', styleUrls: ['./test-sheet-modal-page.page.scss'], }) export class TestSheetModalPagePage implements OnInit {

constructor( private modalCtrl: ModalController ) { }

async ngOnInit() { const modal = await this.modalCtrl.create({ breakpoints: [0.25, 0.75], initialBreakpoint: 0.25, backdropBreakpoint: 0.5, component: TestSheetModalComponent, handleBehavior: 'cycle' }); await modal.present(); }

}


5. Try to serve the app :
`ionic serve`
6. The build  failed with the error : Object literal may only specify known properties, and 'handleBehavior' does not exist in type 'ModalOptions<ComponentRef>'.

### Code Reproduction URL

_No response_

### Ionic Info

Ionic:

   Ionic CLI                     : 6.20.1 (/Users/julien/.npm-packages/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.2.4
   @angular-devkit/build-angular : 14.1.3
   @angular-devkit/schematics    : 14.1.2
   @angular/cli                  : 14.1.3
   @ionic/angular-toolkit        : 7.0.0

Capacitor:

   Capacitor CLI      : 4.1.0
   @capacitor/android : 4.1.0
   @capacitor/core    : 4.1.0
   @capacitor/ios     : 4.1.0

Utility:

   cordova-res : 0.15.4
   native-run  : 1.6.0

System:

   NodeJS : v14.18.2 (/usr/local/bin/node)
   npm    : 8.18.0
   OS     : macOS Monterey

### Additional Information

handleBehavior property can be used with inline modals.
liamdebeasi commented 2 years ago

Thanks for the issue. Here is a dev build with a proposed fix if you are interested in testing:

npm install @ionic/angular@6.2.5-dev.11661433365.198ed930
jdupuis commented 2 years ago

Thanks for the fix @liamdebeasi, it works with the dev build ! 👍

liamdebeasi commented 2 years ago

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/25821, and a fix will be available in an upcoming release of Ionic Framework.

ionitron-bot[bot] commented 2 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.