Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[🐞] Qwik removing nested form tag #7184

Closed
GrandSchtroumpf opened this issue Dec 20, 2024 · 2 comments
Closed

[🐞] Qwik removing nested form tag #7184

GrandSchtroumpf opened this issue Dec 20, 2024 · 2 comments
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working

Comments

@GrandSchtroumpf
Copy link
Contributor

GrandSchtroumpf commented Dec 20, 2024

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

Nested

tags are removed from the template. In this example, the inside a element will not be in the final HTML ...

export default component$(() => {
  const dialogId = useId();
  const open = $(() => {
    const dialog = document.getElementById(dialogId) as HTMLDialogElement;
    dialog.showModal();
  });
  return (
    <form preventdefault:submit>
      <button type="button" onClick$={open} aria-controls={dialogId}>
        Open Dialog
      </button>
      <dialog id={dialogId}>
        <form method="dialog" stoppropagation:submit> {/* <-- Not included */}
          <input type="text" />
          <button type="submit" value="ok" formMethod="dialog">
            Save
          </button>
        </form>
      </dialog>
    </form>
  );
});

I'm aware that tag shouldn't have <form> tags as children, but I think with <dialog> this is a legit use. Also I wouldn't expect the framework to remove it. Moreover without a warning.

Reproduction

https://stackblitz.com/edit/github-sced1jck?file=src%2Froutes%2Findex.tsx

Steps to reproduce

Create a component with nested tag. Inspect the code in the browser, the nested form has been removed.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor
    Memory: 18.63 GB / 31.18 GB
  Binaries:
    Node: 22.8.0 - ~\.nvm\versions\node\v22.8.0\bin\node.EXE
    npm: 10.9.0 - ~\.nvm\versions\node\v22.8.0\bin\npm.CMD
    pnpm: 9.12.2 - ~\.nvm\versions\node\v22.8.0\bin\pnpm.CMD
  Browsers:
    Edge: Chromium (129.0.2792.65)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @builder.io/qwik: 1.10.0 => 1.10.0
    @builder.io/qwik-city: 1.10.0 => 1.10.0
    typescript: 5.4.5 => 5.4.5
    undici: * => 6.20.0
    vite: 5.3.5 => 5.3.5

Additional Information

Usually this kind of problem can be fixed with createPortal to move the dialog form out of the parent form, but qwik doesn't provide this kind of solution.

@GrandSchtroumpf GrandSchtroumpf added STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working labels Dec 20, 2024
@GrandSchtroumpf
Copy link
Contributor Author

This is chrome behavior. Nothing to do with qwik.

@gioboa
Copy link
Member

gioboa commented Dec 22, 2024

@GrandSchtroumpf Thanks for the update

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants