Compose Navigation show overlay on Desktop & Web

[KhubaibKhan4]

Describe the bug Compose Multiplatform Official Navigation Library doesn't work on Desktop & Web Platforms in Compose + Kotlin Multiplatform.

Affected platforms

• Desktop (Windows, Linux, macOS)
• Web (K/Wasm) - Canvas based API
• Web (K/JS) - Canvas based API
• Web (K/JS) - HTML library

Versions

• Kotlin version*: 1.9.23
• Compose Multiplatform version*: 1.6.2
• OS version(s)* (required for Desktop and Web issues): Windows + MacOS
• JDK (for desktop issues):19

To Reproduce Steps and/or the code snippet to reproduce the behavior:

1. Go to 'Run Toolbar Menu'
2. Click on 'Run Desktop Application'
3. click on 'Any Item in the list'
4. See error : Didn't navigation to next screen, instead an overlay appears.

Expected behavior When I try to run Desktop Application or Web. They both run fine but when I click on any items in the List, an overlay appears and I'm unable to navigate but that's works on iOS + Android.

Screenshots Here is the screen UI after clicking on item in the list and this overlay appears.

[MatkovIvan]

Hi @KhubaibKhan4,

I see no specific error or reproduction steps in the description that I can use to actually reproduce it. Also, you forgot to specify what version of the navigation library you use. It's not clear what's exactly going wrong here, what's "overlay" means, etc.

Please provide a reproducible minimal sample (not the full app).

Also, you can refer to this example that works on all mentioned platforms: https://github.com/MatkovIvan/nav_cupcake

[KhubaibKhan4]

I don't know what's the issue with navigation use Compose Navigation Library. Yesterday, I was trying to Convert YouTube-Clone-KMP to Compose Navigation. I converted the full application to it. But When it comes to running the Desktop + Web Application, I was facing the above error. The Error is like: When i run the application, that takes some more time than Previous Library. Secondly when I click on any Video Thumbnail to Navigate on Detail Screen with Video Players and other stuff, I get error. An Overlay appears above & no Navigation Happens.

Let me share Screenshots with Other Library and With Compose Navigation Library:

Voyager Libs Navigation:

Compose Navigation issue:

Now, i again revert back my Repository: Repository Link: https://github.com/KhubaibKhan4/Youtube-Clone-KMP

[MatkovIvan]

I don't see that the Jetpack navigation library is used/included in the provided project at all - you're using Voyager there and recent commits with related titles didn't change dependencies.

Please provide a reproducible minimal sample of the described problem so I can help here

[KhubaibKhan4]

I just revert back from Jetpack Compose Navigation and still doing some work. Here is dependency: implementation("org.jetbrains.androidx.navigation:navigation-compose:2.7.0-alpha03")

After facing that issue, I revert back.

[MatkovIvan]

You're manually/explicitly drawing HomeScreen second time above navigation-controlled content.

[KhubaibKhan4]

Thank you. My bad 😔

[KhubaibKhan4]

But still one thing. Navigation on Desktop + Desktop is really leggy. Hopefully that will be resolved soon.

[MatkovIvan]

I saw performance problems in your project, but I don't think that it's related to the navigation. If you think that's the case - please prepare a separate report with measurements before/after. Note that for "reproduction sample" it's much better to attach a minimal project with the isolated case, but not just your entire project.

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.