kit
kit copied to clipboard
Links without an href wrongly refocus an autofocus input
Describe the bug
Obviously an anchor without an href is ... wrong. But it looks like they produce incorrect behavior in SvelteKit, at least with respect to re-focusing an input with autofocus.
An anchor with no href re-focuses your input with autofocus.
An anchor with an href, but which calls preventDefault behaves correctly, and does not
Reproduction
https://github.com/arackaf/sveltekit-autofocus-bug-repro
Logs
n/a
System Info
System:
OS: macOS 13.0.1
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 77.12 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.11.1 - /usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node
Yarn: 1.22.17 - /usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/yarn
npm: 8.18.0 - ~/Documents/node_modules/.bin/npm
Browsers:
Chrome: 108.0.5359.98
npmPackages:
@sveltejs/adapter-auto: next => 1.0.0-next.90
@sveltejs/kit: next => 1.0.0-next.581
svelte: ^3.54.0 => 3.54.0
vite: ^4.0.0 => 4.0.0
Severity
very minor annoyance
Additional Information
No response
The problem is that while normalizing/constructing the URL, there's no "ignore this event because no href set", instead the URL is resolved to the current page (which isn't wrong), but that results in some follow up logic, which is different to native browser behavior
Obviously an anchor without an href is ... wrong
It is not wrong and I have used a elements without href as well, though it can be abused. E.g. this SO question points to a library that uses a elements instead of just buttons.
a elements without href should not be considered links (analogous to CSS's :any-link) and ignored by SvelteKit.
Spec:
If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.