`<Link` breaking when there is padding or margin attached
nikitavoloboev opened this issue · 4 comments
Link to the code that reproduces this issue
https://github.com/kuskusapp/kuskus/tree/73856f275ed41e59bb649d873e88841979a47b47
To Reproduce
repo: https://github.com/kuskusapp/kuskus
on this commit: https://github.com/kuskusapp/kuskus/tree/73856f275ed41e59bb649d873e88841979a47b47
links here: https://github.com/kuskusapp/kuskus/blob/73856f275ed41e59bb649d873e88841979a47b47/components/Header.tsx#L29
don't work
related next.js help discord discussion: https://discord.com/channels/752553802359505017/1239882716539916288
100% bug with Next.js
if I remove mt-8 ml-10 <Link starts working.
Current vs. Expected behavior
<Link works even with those classNames
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:37 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6031
Available memory (MB): 131072
Available CPU cores: 16
Binaries:
Node: 21.7.2
npm: 10.5.0
Yarn: 1.22.22
pnpm: 9.1.1
Relevant Packages:
next: 14.2.3 // Latest available version is detected (14.2.3).
eslint-config-next: 14.2.3
react: 18.3.1
react-dom: 18.3.1
typescript: 5.4.5
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
Navigation
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
No response
CleanShot.2024-05-14.at.13.50.21.mp4
repro as video
someone on Discord suggested to try rename link to smthElse, it did not help.
latest code can be seen in kuskus repo
Could you try to setup a reproduction demo, perhaps at Stackblitz? just write next.new into your URL search bar.
Also, could you try to programmatically trigger .click() from the browser console?
Ok was issue with another element messing it up with position: fixed. It's resolved now.
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.