[🐞] Removing a conditional element re-inserts its later siblings (iframes reload, focus is lost)

Closed
  • Is something wrong?
#9,188 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@ybai08 is already working on this.

Since Oct 18, 2026.

  • #9229 by @ybai08 — open

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Start with the linked reproduction repository (tuurbo/qwik-rc-conditional-removal-repro) and the MutationObserver removal and insertion order it describes, using a section containing a conditional p, an iframe and a button. The bug lives in how the Qwik Runtime reconciles sibling DOM nodes after a conditional child is removed, so the work is in the runtime's rendering path, not in the example. Done means that removing the p produces only a single removed node, and that the iframe keeps its state and the button keeps focus.

Written by the indexing model from the issue text.

Description

Which component is affected?

Qwik Runtime

Describe the bug

When a conditional element is removed, Qwik also removes and re-adds every element after it. Re-inserting an <iframe> reloads it, and re-inserting a focused element drops focus.

const show = useSignal(false);

<section>
  {show.value && <p>Message</p>}
  <iframe srcdoc={frame} />
  <button onClick$={() => (show.value = !show.value)}>Toggle message</button>
</section>

A MutationObserver on the <section>, while hiding the <p>:

removed <iframe>
removed <button>
added <iframe>
added <button>
removed <p>

Expected: only removed <p>. Showing the <p> is a single added <p>.

Reproduction

https://stackblitz.com/github/tuurbo/qwik-rc-conditional-removal-repro https://github.com/tuurbo/qwik-rc-conditional-removal-repro

Steps to reproduce
  1. pnpm install && pnpm dev
  2. Open /. Note the time inside the frame.
  3. Click Toggle message twice. The frame's time changes: it reloaded.
  4. Tab to the button and press Space twice. Focus ends on <body>.
System Info
OS: Windows 11
Node: 26.10.0
pnpm: 12.9.1
@qwik.dev/core: 2.0.0-rc.2
@qwik.dev/router: 2.0.0-rc.2
vite: 8.3.3
Additional Information

Real-world impact: our payment page has Braintree hosted card fields (iframes) placed after an error message. Clearing the error on resubmit reloads the iframes losing the users entered card data.

Workarounds that keep the siblings in place: wrap the conditional so nothing follows it in its parent (<div>{show.value && <p>Message</p>}</div>), move it into its own component$, or always render it and toggle hidden.

Possibly related: #8694 (a <dialog> loses its top-layer state after an action submit, which fits it being re-inserted).

Dominant language
TypeScript
Stars
22.1k
Forks
1.4k
Avg merge
2d 17h
Merged PRs (30d)
99

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from QwikDev/qwik

All issues in QwikDev/qwik

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.