Hydration mismatch on BNavItemDropdown with v0.17

[ptdev]

Describe the bug

Adding a BNavItemDropdown inside a BNavbarNav triggers a hydration mismatch on Nuxt.

Reproduction example is using the example from the documentation

Reproduction

https://stackblitz.com/edit/nuxt-starter-g6bzks?file=layouts%2Fdefault.vue

Used Package Manager

yarn

Validations

• Have tested with the latest version. This is still alpha version and sometime things change rapidly.
• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-g6bzks (Open reproduction)

[xvaara]

@VividLemon if the :to in teleport is undefined, the disabled teleport won't render in ssr 😆

there is even a pull request about it for months: https://github.com/vuejs/core/pull/9783/files

:to="teleportTo || 'body'" fixes this, should we add that to all the teleports? Since body is the only element we can count that is there...

[github-actions]

This issue is stale because it has been open for 30 days with no activity. It will not be auto-closed

[rhelling]

Had the same issue, thanks to @xvaara hints i ended up with the following work-a-round. Keep in mind the id-prop needs to be specified too, else it will generate one on server which differs from the client generated id.

<BNavItemDropdown
  id="someId"
  :teleport-disabled="true"
  teleport-to="body"
> ...
</BNavItemDropdown>

[ptdev]

Thanks @rhelling

I can confirm that we no longer get hydration errors after applying your workaround.

Cheers