feat: auto-submit username form on paste#50
feat: auto-submit username form on paste#50cernymatej wants to merge 1 commit intoMatteoGabriele:mainfrom
Conversation
✅ Deploy Preview for agentscan ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Organic activityNo automation signals detected in the analyzed events. This is an automated analysis by AgentScan |
📝 WalkthroughWalkthroughA new Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/composables/usePaste.ts (1)
10-10: Drop thewindow.clipboardDatalegacy fallback.
window.clipboardDatais an IE-only API. This app targets modern browsers (Nuxt 3 + Vue 3), whereevent.clipboardDatais always present on aClipboardEvent. The fallback adds atypeof event.clipboardDatacast that obscures types and a dead-code branch that will never trigger, making the dev-only warning effectively unreachable too.♻️ Suggested simplification
- const clipboard = (event.clipboardData || ("clipboardData" in window && window.clipboardData)) as typeof event.clipboardData; - if (!clipboard) { - if (import.meta.dev) { - console.warn("[usePaste] Clipboard API not supported in this browser."); - } - return; - } - const pasted = clipboard.getData("text"); + const pasted = event.clipboardData?.getData("text") ?? "";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/composables/usePaste.ts` at line 10, Remove the legacy IE fallback and cast: replace the clipboard assignment that uses (event.clipboardData || ("clipboardData" in window && window.clipboardData)) with a direct use of event.clipboardData in usePaste.ts; update any type assertions so clipboard is typed as event.clipboardData's type (or let TypeScript infer it), and remove the now-dead branch and any dev-only warning code that depended on window.clipboardData being checked.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/components/Analysis/Form.vue`:
- Around line 28-30: The paste handler wired via usePaste should trim the pasted
text and sync it into the form model before calling submit: when the paste
callback receives pasted, trim it (e.g., const value = pasted.trim()), write
that trimmed value back into the input element (inputRef.value.value = value)
and into the reactive model (accountName = value) and then call submit(value);
also update submit() itself to trim its incoming value so typed input benefits
from the same empty/whitespace guard; adjust references to usePaste, inputRef,
accountName, and submit accordingly.
---
Nitpick comments:
In `@app/composables/usePaste.ts`:
- Line 10: Remove the legacy IE fallback and cast: replace the clipboard
assignment that uses (event.clipboardData || ("clipboardData" in window &&
window.clipboardData)) with a direct use of event.clipboardData in usePaste.ts;
update any type assertions so clipboard is typed as event.clipboardData's type
(or let TypeScript infer it), and remove the now-dead branch and any dev-only
warning code that depended on window.clipboardData being checked.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 529dc9cd-c244-471d-8723-3c33b947e08b
📒 Files selected for processing (2)
app/components/Analysis/Form.vueapp/composables/usePaste.ts
| usePaste(inputRef, (pasted) => { | ||
| submit(pasted); | ||
| }); |
There was a problem hiding this comment.
Trim pasted value and sync it into the model.
Two issues with the paste-submit wiring:
- Whitespace bypasses the empty guard. Clipboard contents often carry leading/trailing whitespace (e.g. when copying a username from a sentence or a table cell).
submit()only checks!value, so a pasted" "or"foo\n"will be emitted as-is, leading torouter.push({ params: { name: "foo\n" } })inapp/pages/index.vueand a broken route. accountNameis not updated. The paste event fires before the browser writes the value into the input, soaccountNamekeeps its prior value whilesubmit(pasted)emits the new one. If navigation is cancelled/aborted (e.g. route guard, error boundary), the field visibly diverges from what was actually submitted.
🛠️ Suggested fix
usePaste(inputRef, (pasted) => {
- submit(pasted);
+ const value = pasted.trim();
+ accountName.value = value;
+ submit(value);
});You may also want submit() itself to trim, so manual typing benefits from the same guard:
function submit(value: string) {
- if (!value) {
+ const normalized = value.trim();
+ if (!normalized) {
return;
}
- emit("submit", value.toLowerCase());
+ emit("submit", normalized.toLowerCase());
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| usePaste(inputRef, (pasted) => { | |
| submit(pasted); | |
| }); | |
| usePaste(inputRef, (pasted) => { | |
| const value = pasted.trim(); | |
| accountName.value = value; | |
| submit(value); | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/components/Analysis/Form.vue` around lines 28 - 30, The paste handler
wired via usePaste should trim the pasted text and sync it into the form model
before calling submit: when the paste callback receives pasted, trim it (e.g.,
const value = pasted.trim()), write that trimmed value back into the input
element (inputRef.value.value = value) and into the reactive model (accountName
= value) and then call submit(value); also update submit() itself to trim its
incoming value so typed input benefits from the same empty/whitespace guard;
adjust references to usePaste, inputRef, accountName, and submit accordingly.
|
Hi @cernymatej, thanks for developing this idea. However, I don't believe it's a well-known pattern, and it could introduce unnecessary complexity and potentially unexpected behaviors. As a user, I wouldn't expect this. I prefer a simpler approach: copy, paste, search: it's more straightforward and predictable. |
|
right, feel feee to close this then 😅 it's actually similar to how npmx.dev does it -> it also loads the results immediately (though that's implemented as a debounced search) |
|
Yeah, I personally fought to remove that feature: for me, it has always been a bit jarring and has added quite a bit of complexity as well. 😅 |
2 participants
This will auto-submit the form when users pase input form their clipboard.
Summary by CodeRabbit