bug: v6, overlay controllers not defining backdrop

[raymondboswel]

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

Current Behavior

My project is currently running on 6.0.0-rc3 and the action sheet controller works as expected. When upgrading to 6.0.0, I get the following error:

Expected Behavior

The actionsheet should keep working.

Steps to Reproduce

Clone the reproduction project

npm i
npm run dev:start

Click the FAB to see the action sheet.

Update to 6.0.0, and run the project again.

Code Reproduction URL

https://github.com/raymondboswel/ionic-modal-reproduction

Ionic Info

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Can you please isolate your test case a bit more? I am getting some errors for 3rd party dependencies when trying to install. In particular, I am receiving this error:

pm ERR! code ETARGET
npm ERR! notarget No matching version found for tailwindcss@next.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

In order for us to effectively triage this issue, the sample app should only include the code necessary to reproduce the issue.

[raymondboswel]

Hi @liamdebeasi, apologies for the deps not installing, I have pinned the offending dependency. You can pull the latest branch now to see the exception being thrown 👍

[liamdebeasi]

Thanks. Now I am getting the following error:

Failed to resolve import "../.routify/routes" from "src/App.svelte". Does the file exist?

Did you include your routing config?

[raymondboswel]

Hmm. I just cloned the repo in a fresh directory on my side, and it works. I think you might be running into this issue: vitejs/vite#2585 || vitejs/vite#2647 ("issue was because of a space in parent folder name.").

[liamdebeasi]

I don't seem to have the .routify directory at the root. Do I need to do anything special to get this? I also do not see the .routify directory in the repo: https://github.com/raymondboswel/ionic-modal-reproduction

[raymondboswel]

The .routify directory is in the .gitignore of the starter project I used. But if I delete it locally and run npm run dev:start it gets recreated. You can also try npm run build:app, or npm run build:routify to create it. In the mean time I'll push the directory then we can see if that works.

Edit: Looking at the .routify files, I see there are absolute paths in there, so I doubt they would work, but I'll push them anyhow.

[liamdebeasi]

npm run dev:start did the trick! Not sure why it did not work the first time. Thanks!

[raymondboswel]

Excellent! I'm glad it's working. Let me know if you need anything else.

[liamdebeasi]

One more question -- what is the error you are getting? The screenshot you attached is not showing up:

[raymondboswel]

[liamdebeasi]

If you import actionSheetController from @ionic/core/components instead of @ionic/core, does that fix the issue?

@ionic/core uses lazy loading while @ionic/core/components does not. It seems that mixing the two is causing some unexpected behaviors.

[raymondboswel]

That took care of the exception, but there's an issue with the backdrop in 6.0.0. I've attached video of the behaviour (You can't see me clicking, but clicking on the background does not dismiss the AS)

[raymondboswel]

For reference 6.0.0-rc.3:

[liamdebeasi]

Ah looks like the backdrop is not getting defined. We should fix that internally.

As a workaround, importing and defining IonBackdrop should fix the issue until we can get a patch in.

[liamdebeasi]

This looks to be a continuation of #24372.

[raymondboswel]

Ok great. I'll be happy to try a fix out when it's released 👍

[sean-perkins]

@raymondboswel can you try this dev build of v6 with the additional custom elements defined for overlays and let me know if that resolves the issues you've reported?

npm install @ionic/core@6.0.0-dev.1639604950.5995f29

[raymondboswel]

Yes, that looks great @sean-perkins 👍 . The only remaining issue I can see at this stage, is that a modal created with

<ion-modal bind:this={modal} is-open={showModal}>
  <CreateProject />
</ion-modal>

doesn't seem to quite get the screen dimensions right, but I've already reported that in #24379.

Created with modalController:

Thank you very much guys! I think we can close this one out 👍

[ionitron-bot]

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.