Repository navigation
Fix "try another way" link - #981
Conversation
📝 WalkthroughWalkthroughUpdated the login template's anchor click handler to accept the click event, call event.preventDefault(), and submit the surrounding form via requestSubmit(), preventing default navigation/download while preserving form submission. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/login/Template.tsx (1)
159-168: Restore keyboard accessibility for the "Try another way" link.Removing the
hrefattribute breaks keyboard navigation and screen reader compatibility. Without anhref, the anchor element is not keyboard-focusable by default and may not be recognized as an interactive element by assistive technologies, preventing keyboard users from accessing this functionality.Consider one of these solutions:
Solution 1 (Recommended): Add
href="#"androle="button"while keeping the click handler:<a + href="#" + role="button" id="try-another-way" => { document.forms["kc-select-try-another-way-form" as never].requestSubmit(); event.preventDefault(); return false; }} > {msg("doTryAnotherWay")} </a>Solution 2 (Alternative): Replace with a button element styled as a link:
-<a +<button + type="button" + className={kcClsx("kcFormButtonClass")} // or appropriate link-styled class id="try-another-way" => { document.forms["kc-select-try-another-way-form" as never].requestSubmit(); event.preventDefault(); - return false; }} > {msg("doTryAnotherWay")} -</a> +</button>
🧹 Nitpick comments (1)
src/login/Template.tsx (1)
161-165: Consider simplifying the click handler.Two optional improvements:
The
return falsestatement on Line 164 is redundant sinceevent.preventDefault()is already called. In React, returningfalsedoesn't prevent default behavior like it does in jQuery.The type assertion
as neveron Line 162 is a workaround for TypeScript's forms collection typing. Consider using a more explicit approach:♻️ Suggested refactor
=> { - document.forms["kc-select-try-another-way-form" as never].requestSubmit(); + const form = document.getElementById("kc-select-try-another-way-form") as HTMLFormElement; + form.requestSubmit(); event.preventDefault(); - return false; }}Or if keeping the forms collection access:
=> { - document.forms["kc-select-try-another-way-form" as never].requestSubmit(); + (document.forms.namedItem("kc-select-try-another-way-form") as HTMLFormElement).requestSubmit(); event.preventDefault(); - return false; }}
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/login/Template.tsx
🔇 Additional comments (1)
src/login/Template.tsx (1)
162-162: Verify your project's browser support policy forrequestSubmit().The
requestSubmit()method is supported in Chrome 76+, Firefox 75+, and Safari 16+. If your project requires compatibility with older browsers, consider this fallback pattern:Fallback for older browsers
=> { - document.forms["kc-select-try-another-way-form" as never].requestSubmit(); + const form = document.getElementById("kc-select-try-another-way-form") as HTMLFormElement; + if (form.requestSubmit) { + form.requestSubmit(); + } else { + form.submit(); + } event.preventDefault(); return false; }}Note: Using
submit()as a fallback won't trigger form validation orsubmitevent listeners, but ensures basic functionality.
Prevent default action of navigation event Fixes keycloakify#912
adad823 to
26635d0
Compare
|
Thank you 🙏🏻 ! @allcontributors add @db6edr for code |
|
I've put up a pull request to add @db6edr! 🎉 |
Prevent default action of navigation event
Fixes #912
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.