[Form] Nested UForm in UModal is not rendered as form

[selfire1]

Environment

• Operating System: Darwin
• Node Version: v20.18.3
• Nuxt Version: 3.16.2
• CLI Version: 3.24.1
• Nitro Version: 2.11.9
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, css, future, compatibilityDate
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.2

Reproduction

https://stackblitz.com/edit/github-s2opq2ko?file=app/pages/index.vue

Description

Given this component nesting:

• UForm
  • UModal
    • UForm

This is rendered as the following html:

• UForm -> form - ✅
  • UModal -> div - ✅ (teleported to root)
    • UForm -> div - ❌ I am expecting form.

I couldn't find a mention in the documentation that this is expected behaviour.

To reproduce:

1. Run reproduction
2. Click "Open modal" button
3. Inspect the nested form element. It's a div:
   

I am happy to have a crack at a PR, if you're willing to point me in the right direction 😌

Additional context

For context, this is our use case:

• User fills out an onboarding form
• One field in the onboarding form is business details
• User has option to populate business details via business number (eg. DUNS)
• Business number field open in modal
• User can enter business number in form in modal
• User submits form, it populates state in parent form

Logs

[romhml]

This is related to nested forms, we'll add something to opt out of it. Let's track this discussion in #3849.