kit icon indicating copy to clipboard operation
kit copied to clipboard

Links without an href wrongly refocus an autofocus input

Open arackaf opened this issue 3 years ago • 2 comments

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

arackaf avatar Dec 10 '22 02:12 arackaf

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

dummdidumm avatar Dec 12 '22 16:12 dummdidumm

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.

brunnerh avatar Dec 13 '22 15:12 brunnerh