diff --git a/.changeset/tidy-books-reply.md b/.changeset/tidy-books-reply.md
new file mode 100644
index 000000000000..d744b1ea4212
--- /dev/null
+++ b/.changeset/tidy-books-reply.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Reset focus properly
diff --git a/packages/kit/src/runtime/internal/router/index.js b/packages/kit/src/runtime/internal/router/index.js
index 55e8c271dad5..b6002f37ffe1 100644
--- a/packages/kit/src/runtime/internal/router/index.js
+++ b/packages/kit/src/runtime/internal/router/index.js
@@ -119,6 +119,9 @@ export class Router {
}
});
+ // make it possible to reset focus
+ document.body.setAttribute('tabindex', '-1');
+
// load current page
this.history.replaceState({}, '', location.href);
@@ -177,9 +180,7 @@ export class Router {
await this.renderer.render(selected);
- if (document.activeElement instanceof HTMLElement) {
- document.activeElement.blur();
- }
+ document.body.focus();
const deep_linked = hash && document.getElementById(hash.slice(1));
if (scroll) {
diff --git a/test/apps/basics/src/routes/focus/$layout.svelte b/test/apps/basics/src/routes/focus/$layout.svelte
new file mode 100644
index 000000000000..2ee09c61af46
--- /dev/null
+++ b/test/apps/basics/src/routes/focus/$layout.svelte
@@ -0,0 +1,3 @@
+
+
+
a
diff --git a/test/apps/basics/src/routes/focus/b.svelte b/test/apps/basics/src/routes/focus/b.svelte new file mode 100644 index 000000000000..db2e4f2757c0 --- /dev/null +++ b/test/apps/basics/src/routes/focus/b.svelte @@ -0,0 +1 @@ +b
diff --git a/test/runner.js b/test/runner.js index 5ad8f56793dd..e670d45bdb1d 100644 --- a/test/runner.js +++ b/test/runner.js @@ -15,7 +15,8 @@ async function setup({ port }) { await page .waitForFunction( ({ expectedValue, selector }) => - document.querySelector(selector) && document.querySelector(selector).textContent === expectedValue, + document.querySelector(selector) && + document.querySelector(selector).textContent === expectedValue, { expectedValue, selector }, { timeout: defaultTimeout } ) @@ -28,7 +29,7 @@ async function setup({ port }) { const capture_requests = async (operations) => { const requests = []; - const on_request = request => requests.push(request.url()); + const on_request = (request) => requests.push(request.url()); page.on('request', on_request); try { @@ -56,9 +57,9 @@ async function setup({ port }) { return { base, - visit: path => page.goto(base + path), - contains: async str => (await page.innerHTML('body')).includes(str), - html: async selector => await page.innerHTML(selector, { timeout: defaultTimeout }), + visit: (path) => page.goto(base + path), + contains: async (str) => (await page.innerHTML('body')).includes(str), + html: async (selector) => await page.innerHTML(selector, { timeout: defaultTimeout }), fetch: (url, opts) => fetch(`${base}${url}`, opts), text, evaluate: (fn) => page.evaluate(fn), @@ -73,9 +74,10 @@ async function setup({ port }) { wait_for_function: (fn, arg, options) => page.waitForFunction(fn, arg, { timeout: defaultTimeout, ...options }), capture_requests, - set_extra_http_headers: headers => page.setExtraHTTPHeaders(headers), + set_extra_http_headers: (headers) => page.setExtraHTTPHeaders(headers), pathname: () => page.url().replace(base, ''), - $: selector => page.$(selector) + keyboard: page.keyboard, + $: (selector) => page.$(selector) }; } @@ -88,7 +90,7 @@ export function runner(callback, options = {}) { const duplicate = (test_fn) => { return (name, callback) => { - test_fn(`${name} [no js]`, async context => { + test_fn(`${name} [no js]`, async (context) => { await callback({ ...context, js: false @@ -96,7 +98,7 @@ export function runner(callback, options = {}) { }); if (!options.amp) { - test_fn(`${name} [js]`, async context => { + test_fn(`${name} [js]`, async (context) => { await callback({ ...context, js: true, @@ -108,8 +110,8 @@ export function runner(callback, options = {}) { }); }); } - } - } + }; + }; const test = duplicate(suite); test.skip = duplicate(suite.skip);