Skip to content

fix: blur active element before component update during navigation#15452

Merged
Rich-Harris merged 2 commits into
sveltejs:mainfrom
MathiasWP:fix/blur-during-navigation-14575
Jun 18, 2026
Merged

fix: blur active element before component update during navigation#15452
Rich-Harris merged 2 commits into
sveltejs:mainfrom
MathiasWP:fix/blur-during-navigation-14575

Conversation

@MathiasWP

Copy link
Copy Markdown
Contributor

Closes #14575

Summary

  • Blur the active element before root.$set() so that blur/focusout handlers fire while the old component's data is still valid
  • Previously, root.$set() would null out component data before the browser fired blur on the old active element, causing TypeError: Cannot set properties of undefined in blur handlers that accessed data
  • Adds integration tests covering both goto() and popstate (back button) navigation paths

Edge case analysis

Safe — no breakage expected

  • Normal navigation: Focus was already going to be reset to <body> after navigation (reset_focus()). The blur just fires slightly earlier now.
  • keepFocus: true: Guarded by !keepfocus — no change in behavior.
  • No focused element / body focused: Guarded by activeElement !== document.body — no spurious blur fires.
  • Autofocus on target page: Unaffected — reset_focus() still runs after component update.

Edge cases (low risk)

  1. Blur handler triggers goto(): The existing nav_token system will abort the original navigation. This is already possible today — the fix just means blur fires slightly earlier, so such navigations could cancel more often. Very uncommon pattern and already fragile.
  2. Blur handler shows alert()/confirm(): These block the JS thread, delaying navigation. Same behavior as before, just fires at a slightly different time.
  3. Blur handler does heavy DOM mutation: Since blur fires before root.$set(), mutations could theoretically conflict — but Svelte's component update replaces the DOM anyway, so this is safe in practice.

Test plan

  • pnpm build passes
  • Integration tests pass: blur handler can access data during navigation (goto path)
  • Integration tests pass: blur handler can access data during popstate navigation (back button path)
  • pnpm -F @sveltejs/kit test:unit — no regressions (447 passed)

🤖 Generated with Claude Code

@changeset-bot

changeset-bot Bot commented Feb 27, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 3894e26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@sveltejs/kit Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@svelte-docs-bot

Copy link
Copy Markdown

@MathiasWP MathiasWP force-pushed the fix/blur-during-navigation-14575 branch 2 times, most recently from f3bd85d to a0aad54 Compare February 27, 2026 22:05
…veltejs#14575)

Blur the active element before `root.$set()` so that blur/focusout
handlers fire while the old component's data is still valid. Previously,
data was nulled out before blur fired, causing TypeErrors in blur
handlers that accessed component data.

Guarded by `!keepfocus` and only applies when the active element is not
the body.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@MathiasWP MathiasWP force-pushed the fix/blur-during-navigation-14575 branch from a0aad54 to 2a3818c Compare February 27, 2026 22:08
The svelte-check type checker flags `window.__blur_test_result` as an
error since the property doesn't exist on the Window type. Use the same
`/** @type {any} */ (window)` cast pattern used in the test file.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

@Rich-Harris Rich-Harris left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this makes total sense. thank you!

@Rich-Harris Rich-Harris merged commit 63f1b0b into sveltejs:main Jun 18, 2026
26 checks passed
@github-actions github-actions Bot mentioned this pull request Jun 18, 2026
Rich-Harris pushed a commit that referenced this pull request Jun 18, 2026
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @sveltejs/enhanced-img@0.11.0

### Minor Changes


- feat: export `EnhancedImgAttributes` type
([#15649](#15649))


### Patch Changes


- fix: exclude imports with `?` character from transformation
([#15617](#15617))
## @sveltejs/kit@2.66.0

### Minor Changes


- feat: precompress prerendered `.md` and `.mdx` files
([#15893](#15893))


- feat: warn the user when they forget to make boolean inputs optional
in their form schemas
([#15804](#15804))


### Patch Changes


- fix: blur active element before component update during navigation so
that blur/focusout handlers fire while old component data is still valid
([#15452](#15452))


- fix: ensure `base` is available from `$service-worker` during
development ([#15882](#15882))


- fix: use correct relative asset paths when rendering an error page for
a missing `__data.json` request
([#15884](#15884))


- fix: preserve active `for await` consumers across `query.live`
reconnects ([#16022](#16022))


- fix: settle `query.live` reconnect promise on all exit paths,
preventing `invalidateAll()` from deadlocking when a live query is
offline or interrupted
([#16022](#16022))


- fix: preserve last value when a `query.live` stream completes without
yielding on reconnect
([#16022](#16022))


- fix: remove `types: ['node']` from generated tsconfig to avoid errors
when `@types/node` is not installed
([#15709](#15709))


- fix: prefer pages over endpoints when prerendering
([#16076](#16076))


- fix: restore snapshots after afterNavigate callbacks
([#16066](#16066))


- fix: support `ws:`/`wss:` and `trusted-types-eval` for CSP sources
([#15938](#15938))


- fix: omit empty `file` inputs from remote form data
([#15898](#15898))


- fix: fail early if a route with `+page` and `+server` is marked as
prerenderable ([#16075](#16075))


- fix: wait a tick before resetting forms
([#15805](#15805))


- fix: `preflight` schemas apply correctly when chained before `for`
([#15863](#15863))


- fix: blank page in SPA mode when root layout `load()` throws
([#15798](#15798))


- fix: pass all unknown options from the `sveltekit` Vite plugin through
to `vite-plugin-svelte`
([#16010](#16010))
## @sveltejs/adapter-node@5.5.5

### Patch Changes


- fix: bundle entrypoints alongside app code
([#16069](#16069))


- fix: log the actual adapter-node listening address
([#15899](#15899))

- Updated dependencies
[[`63f1b0b`](63f1b0b),
[`1dbff3f`](1dbff3f),
[`961ba01`](961ba01),
[`d2e108c`](d2e108c),
[`d2e108c`](d2e108c),
[`d2e108c`](d2e108c),
[`860b3c7`](860b3c7),
[`f8c842c`](f8c842c),
[`d3aa5fe`](d3aa5fe),
[`0dd7659`](0dd7659),
[`03e9f66`](03e9f66),
[`57b7b7b`](57b7b7b),
[`4eabadc`](4eabadc),
[`6fbf2b6`](6fbf2b6),
[`276744d`](276744d),
[`8740132`](8740132),
[`f430a68`](f430a68),
[`1c7a8dc`](1c7a8dc)]:
  - @sveltejs/kit@2.66.0
## @sveltejs/adapter-vercel@6.3.4

### Patch Changes


- fix: prevent missing immutable assets from being cached as 404s for a
year ([#16077](#16077))

- Updated dependencies
[[`63f1b0b`](63f1b0b),
[`1dbff3f`](1dbff3f),
[`961ba01`](961ba01),
[`d2e108c`](d2e108c),
[`d2e108c`](d2e108c),
[`d2e108c`](d2e108c),
[`860b3c7`](860b3c7),
[`f8c842c`](f8c842c),
[`d3aa5fe`](d3aa5fe),
[`0dd7659`](0dd7659),
[`03e9f66`](03e9f66),
[`57b7b7b`](57b7b7b),
[`4eabadc`](4eabadc),
[`6fbf2b6`](6fbf2b6),
[`276744d`](276744d),
[`8740132`](8740132),
[`f430a68`](f430a68),
[`1c7a8dc`](1c7a8dc)]:
  - @sveltejs/kit@2.66.0

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
huskas-2189 pushed a commit to huskas-2189/Bookmark that referenced this pull request Jun 20, 2026
This PR contains the following updates:

| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@sveltejs/kit](https://svelte.dev) ([source](https://github.com/sveltejs/kit/tree/HEAD/packages/kit)) | [`2.65.1` → `2.66.0`](https://renovatebot.com/diffs/npm/@sveltejs%2fkit/2.65.1/2.66.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@sveltejs%2fkit/2.66.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@sveltejs%2fkit/2.65.1/2.66.0?slim=true) |

---

### Release Notes

<details>
<summary>sveltejs/kit (@&#8203;sveltejs/kit)</summary>

### [`v2.66.0`](https://github.com/sveltejs/kit/blob/HEAD/packages/kit/CHANGELOG.md#2660)

[Compare Source](https://github.com/sveltejs/kit/compare/@sveltejs/kit@2.65.2...@sveltejs/kit@2.66.0)

##### Minor Changes

- feat: precompress prerendered `.md` and `.mdx` files ([#&#8203;15893](sveltejs/kit#15893))

- feat: warn the user when they forget to make boolean inputs optional in their form schemas ([#&#8203;15804](sveltejs/kit#15804))

##### Patch Changes

- fix: blur active element before component update during navigation so that blur/focusout handlers fire while old component data is still valid ([#&#8203;15452](sveltejs/kit#15452))

- fix: ensure `base` is available from `$service-worker` during development ([#&#8203;15882](sveltejs/kit#15882))

- fix: use correct relative asset paths when rendering an error page for a missing `__data.json` request ([#&#8203;15884](sveltejs/kit#15884))

- fix: preserve active `for await` consumers across `query.live` reconnects ([#&#8203;16022](sveltejs/kit#16022))

- fix: settle `query.live` reconnect promise on all exit paths, preventing `invalidateAll()` from deadlocking when a live query is offline or interrupted ([#&#8203;16022](sveltejs/kit#16022))

- fix: preserve last value when a `query.live` stream completes without yielding on reconnect ([#&#8203;16022](sveltejs/kit#16022))

- fix: remove `types: ['node']` from generated tsconfig to avoid errors when `@types/node` is not installed ([#&#8203;15709](sveltejs/kit#15709))

- fix: prefer pages over endpoints when prerendering ([#&#8203;16076](sveltejs/kit#16076))

- fix: restore snapshots after afterNavigate callbacks ([#&#8203;16066](sveltejs/kit#16066))

- fix: support `ws:`/`wss:` and `trusted-types-eval` for CSP sources ([#&#8203;15938](sveltejs/kit#15938))

- fix: omit empty `file` inputs from remote form data ([#&#8203;15898](sveltejs/kit#15898))

- fix: fail early if a route with `+page` and `+server` is marked as prerenderable ([#&#8203;16075](sveltejs/kit#16075))

- fix: wait a tick before resetting forms ([#&#8203;15805](sveltejs/kit#15805))

- fix: `preflight` schemas apply correctly when chained before `for` ([#&#8203;15863](sveltejs/kit#15863))

- fix: blank page in SPA mode when root layout `load()` throws ([#&#8203;15798](sveltejs/kit#15798))

- fix: pass all unknown options from the `sveltekit` Vite plugin through to `vite-plugin-svelte` ([#&#8203;16010](sveltejs/kit#16010))

### [`v2.65.2`](https://github.com/sveltejs/kit/blob/HEAD/packages/kit/CHANGELOG.md#2652)

[Compare Source](https://github.com/sveltejs/kit/compare/@sveltejs/kit@2.65.1...@sveltejs/kit@2.65.2)

##### Patch Changes

- fix: throw an error when prerendering a root +server.js that returns a non-HTML response ([#&#8203;15994](sveltejs/kit#15994))

- fix: decode base64-serialized fetch bodies before caching them for client-side replay ([#&#8203;16034](sveltejs/kit#16034))

- fix: correctly access explicit dynamic public environment variables from prerendered pages and service workers ([#&#8203;16024](sveltejs/kit#16024))

- fix: allow `preloadCode` to be called during initial page load ([#&#8203;16028](sveltejs/kit#16028))

- fix: send `cache-control: private, no-store` on remote function responses so personalized query results can never be cached by shared caches ([#&#8203;16020](sveltejs/kit#16020))

- fix: preserve the HTTP status and error body when a remote function request fails in transport (e.g. a 401/403 from a `handle` hook), instead of reporting a generic 500 ([#&#8203;16021](sveltejs/kit#16021))

- fix: avoid loading universal nodes during build analysis when the app uses a hash router ([#&#8203;16042](sveltejs/kit#16042))

- fix: correctly serve client entry during development when using the pnpm global virtual store ([#&#8203;16045](sveltejs/kit#16045))

- fix: normalize path separators when comparing config ([#&#8203;16037](sveltejs/kit#16037))

- fix: ensure `building` resolves correctly to allow avoiding build-time explicit environment variable validation ([#&#8203;16058](sveltejs/kit#16058))

- fix: prevent unhandled promise rejections when remote function failures are consumed via `current`/`error` instead of `await` ([#&#8203;16018](sveltejs/kit#16018))

</details>

---

### Configuration

📅 **Schedule**: (UTC)

- Branch creation
  - At any time (no schedule defined)
- Automerge
  - At any time (no schedule defined)

🚦 **Automerge**: Disabled because a matching PR was automerged previously.

♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Mend Renovate](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4yMjAuMCIsInVwZGF0ZWRJblZlciI6IjQzLjIyMC4wIiwidGFyZ2V0QnJhbmNoIjoiZGV2ZWxvcCIsImxhYmVscyI6W119-->

Reviewed-on: https://codeberg.org/huskas-2189/Bookmark/pulls/126
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

State referenced in onblur handler is undefined after navigation with async load

2 participants