fix: Open the contact mailto with a native anchor - #77
Conversation
The "Contact Us" button in the hero used next/link. The router attaches its own click handler and calls preventDefault on that event, so the browser never performed the default action and the mail client never opened. The button therefore did nothing when clicked. next/link exists for route navigation. mailto: is not a route, so the link is now a plain anchor and the browser handles the protocol itself. Verified in the browser: before the change the click event reported defaultPrevented=true after all handlers had run; afterwards it reports false. Styling and the aria-label are unchanged.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
WalkthroughThe hero contact button now uses a native ChangesContact mailto fix
Estimated code review effort: 1 (Trivial) | ~5 minutes Merge Risk: ⚪ Minimal · up to This is a small, localized change that restores native mailto handling without altering the surrounding styling or layout. No actionable merge-blocking risk remains beyond normal checks and review. Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: dependency version conflict. Check your lock file or package.json. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
1 participant
Addressed Issue
Fixes #69
What I found
I went in expecting a wrong or missing address, but the address is fine. The button renders through
next/link:next/linkattaches its own click handler and callspreventDefault()on the event, so the browser never performs the default action and the mail client is never invoked. The button swallows the click and nothing happens, which matches the report.What made it click for me was the
Join Discordbutton sitting right next to it in the same flex row. Same component, same styling, but it is anhttpslink and it navigates fine. I measured both with a listener that only reads the event and never cancels it, so the value below is the onenext/linkleft behind:defaultPreventedafter handlersmailto:contact@stability.nexustruehttps://discord.gg/...false, navigates normallyThe fix
next/linkis for route navigation, andmailto:is not a route, so the button is now a plain<a>and the browser handles the protocol itself. One element changed.className,aria-labeland layout are all untouched.Running the same probe after the change reports
defaultPrevented: false.Verification
npm run typecheckpasses.components/hero.tsxare already there onmainand are unchanged by this.One thing I was unsure about: CONTRIBUTING asks for
npm run format:write, but running it overhero.tsxreformats the whole component and buries a three line fix in unrelated churn. I left it out to keep the diff readable. Would you rather I run it anyway? Happy to either way.One thing I left alone
While I was in there I noticed
Join DiscordandContact Usare the only external links in the hero withouttarget="_blank", when every other external link on the page has it. That looked like it belongs with #37 rather than here, so I did not touch it. Glad to fold it into this PR if you would prefer it in one place.AI usage
Per the Coding with AI section of CONTRIBUTING: I used Claude (Opus) to help dig into the root cause and draft the fix. I reproduced the behaviour in the browser myself, before and after, and the measurements above are ones I ran.
Summary by CodeRabbit