fix: prevent Enter key from submitting form during autocomplete selection - #7221
Conversation
WalkthroughModified form submission logic in the NewRequest component to prevent unintended form submission when the Enter key is pressed in text inputs, textareas, or contenteditable elements. The change conditionally triggers submission only when the event hasn't been default-prevented and the target is not a text-like field. Changes
Estimated code review effortðŊ 2 (Simple) | âąïļ ~8 minutes Suggested labels
Suggested reviewers
Poem
ðĨ Pre-merge checks | â 5â Passed checks (5 passed)
âïļ Tip: You can configure your own custom pre-merge checks in the settings. âĻ Finishing Touches
𧊠Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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
ðĪ Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/bruno-app/src/components/Sidebar/NewRequest/index.js`:
- Around line 319-330: Rename the local variable isTextInput to isEditableTarget
inside the onKeyDown handler in the NewRequest component, and add a concise
inline comment above the logic explaining that the handler prevents form
submission on Enter when the event target is not an editable element (checks
using e.target.tagName and e.target.isContentEditable), so that inputs,
textareas and contenteditable hosts are allowed to accept Enter while other
elements trigger formik.handleSubmit; ensure the rename is applied where the
variable is declared and used and note in the PR that this change intentionally
excludes contenteditable elements (e.g., the URL editor) from submitting on
Enter.
| onKeyDown={(e) => { | ||
| if (e.key === 'Enter') { | ||
| e.preventDefault(); | ||
| formik.handleSubmit(); | ||
| if (e.key === 'Enter' && !e.defaultPrevented) { | ||
| const isTextInput | ||
| = ['input', 'textarea'].includes(e.target.tagName.toLowerCase()) | ||
| || e.target.isContentEditable; | ||
|
|
||
| if (!isTextInput) { | ||
| e.preventDefault(); | ||
| formik.handleSubmit(); | ||
| } | ||
| } | ||
| }} |
There was a problem hiding this comment.
ð§Đ Analysis chain
ð Script executed:
# First, let's check the file and surrounding context
head -n 335 packages/bruno-app/src/components/Sidebar/NewRequest/index.js | tail -n 25Repository: usebruno/bruno
Length of output: 853
ð Script executed:
# Search for SingleLineEditor implementation and CodeMirror configuration
fd -e js -e jsx -e ts -e tsx | xargs grep -l 'SingleLineEditor' | head -5Repository: usebruno/bruno
Length of output: 505
ð Script executed:
# Look for CodeMirror keydown/Enter handling
rg -n 'SingleLineEditor|CodeMirror' packages/bruno-app/src/components/Sidebar/NewRequest/index.js -A2 -B2Repository: usebruno/bruno
Length of output: 576
ð Script executed:
# Find SingleLineEditor implementation
fd -type f -name 'SingleLineEditor' -o -path '*/SingleLineEditor/*'Repository: usebruno/bruno
Length of output: 228
ð Script executed:
# Look for SingleLineEditor component definition
rg -n 'export.*SingleLineEditor|const SingleLineEditor' packages/bruno-app/src/components/ -type js -type jsx -type ts -type tsxRepository: usebruno/bruno
Length of output: 85
ð Script executed:
# Search in the most likely location
cat packages/bruno-app/src/components/SingleLineEditor/index.js 2>/dev/null | head -100Repository: usebruno/bruno
Length of output: 3488
ð Script executed:
# Check what props are passed to SingleLineEditor in NewRequest
rg -n -A5 'SingleLineEditor' packages/bruno-app/src/components/Sidebar/NewRequest/index.js | grep -A10 'url'Repository: usebruno/bruno
Length of output: 40
ð Script executed:
# Look for the complete SingleLineEditor usage in NewRequest
sed -n '520,540p' packages/bruno-app/src/components/Sidebar/NewRequest/index.jsRepository: usebruno/bruno
Length of output: 979
ð Script executed:
# Search for onRun handler in NewRequest component
rg -n 'onRun|handleRun' packages/bruno-app/src/components/Sidebar/NewRequest/index.jsRepository: usebruno/bruno
Length of output: 40
ð Script executed:
# Check setupAutoComplete implementation to see if it calls preventDefault
rg -n 'setupAutoComplete|preventDefault' packages/bruno-app/src/utils/codemirror/autocomplete.js -A3 -B3 | head -50Repository: usebruno/bruno
Length of output: 274
ð Script executed:
# Also check if variablesAutocomplete prop affects behavior
rg -n 'variablesAutocomplete' packages/bruno-app/src/components/SingleLineEditor/ -A2 -B2Repository: usebruno/bruno
Length of output: 40
ð Script executed:
# Search more broadly for autocomplete and preventDefault
rg -n 'preventDefault' packages/bruno-app/src/utils/codemirror/ --type jsRepository: usebruno/bruno
Length of output: 935
ð Script executed:
# Check the complete SingleLineEditor props in NewRequest to see if onRun is passed
sed -n '525,545p' packages/bruno-app/src/components/Sidebar/NewRequest/index.jsRepository: usebruno/bruno
Length of output: 979
ð Script executed:
# Search for form submission behavior and any other Enter handlers
rg -n 'formik.handleSubmit|onSubmit' packages/bruno-app/src/components/Sidebar/NewRequest/index.js -B2 -A2Repository: usebruno/bruno
Length of output: 761
ð Script executed:
# Check CodeMirror documentation or code to understand if Enter fires preventDefault by default
rg -n 'Enter.*runHandler|extraKeys' packages/bruno-app/src/components/SingleLineEditor/index.js -A5 -B2Repository: usebruno/bruno
Length of output: 772
ð Script executed:
# Verify if SingleLineEditor in NewRequest passes onRun prop
rg -n 'SingleLineEditor' packages/bruno-app/src/components/Sidebar/NewRequest/index.js -A20 | grep -E 'onRun|variablesAutocomplete|/>'Repository: usebruno/bruno
Length of output: 143
ð Script executed:
# Check CodeMirror autocomplete behavior with preventDefault
rg -n 'preventDefault' packages/bruno-app/src/utils/codemirror/autocomplete.js -B5 -A5 | head -40Repository: usebruno/bruno
Length of output: 40
ð Script executed:
# Check complete autocomplete implementation for preventDefault
cat packages/bruno-app/src/utils/codemirror/autocomplete.js | head -150Repository: usebruno/bruno
Length of output: 4400
ð Script executed:
# Check if CodeMirror autocomplete widget calls preventDefault
rg -n 'prevented|onKeyDown|ArrowDown|ArrowUp' packages/bruno-app/src/utils/codemirror/autocomplete.js -B2 -A2Repository: usebruno/bruno
Length of output: 279
ð Script executed:
# Check if runHandler in SingleLineEditor calls preventDefault
sed -n '37,50p' packages/bruno-app/src/components/SingleLineEditor/index.jsRepository: usebruno/bruno
Length of output: 438
ð Script executed:
# Search for Enter key handling with preventDefault in autocomplete
rg -n 'Enter|keydown' packages/bruno-app/src/utils/codemirror/autocomplete.js -A5 -B5 | head -80Repository: usebruno/bruno
Length of output: 580
ð Script executed:
# Check if there's any widget or menu that handles Enter with preventDefault
rg -n 'widget|menu' packages/bruno-app/src/utils/codemirror/autocomplete.js -B3 -A3Repository: usebruno/bruno
Length of output: 40
ð Script executed:
# Look for the complete autocomplete.js to see if it has onKeyDown handlers
wc -l packages/bruno-app/src/utils/codemirror/autocomplete.jsRepository: usebruno/bruno
Length of output: 117
ð Script executed:
# Read the autocomplete file to find Enter key handling
sed -n '600,750p' packages/bruno-app/src/utils/codemirror/autocomplete.js | grep -A10 -B10 'Enter\|ArrowDown\|ArrowUp\|keydown\|prevent'Repository: usebruno/bruno
Length of output: 40
ð Script executed:
# Check if CodeMirror's hint addon is used
rg -n 'showHints\|hint' packages/bruno-app/src/utils/codemirror/autocomplete.js -B3 -A3 | head -60Repository: usebruno/bruno
Length of output: 40
ð Script executed:
# Read middle section of autocomplete file
sed -n '400,500p' packages/bruno-app/src/utils/codemirror/autocomplete.jsRepository: usebruno/bruno
Length of output: 3664
ð Script executed:
# Look for hint widget or menu handling
sed -n '650,748p' packages/bruno-app/src/utils/codemirror/autocomplete.jsRepository: usebruno/bruno
Length of output: 2493
ð Script executed:
# Check if CodeMirror hint is using the official addon
rg -n 'require.*hint|import.*hint' packages/bruno-app/src/utils/codemirror/Repository: usebruno/bruno
Length of output: 151
ð Script executed:
# Check if CodeMirror's hint addon calls preventDefault during autocomplete selection
rg -n 'show.*hint\|hint.*widget' packages/bruno-app/src/ -l | head -5Repository: usebruno/bruno
Length of output: 40
ð Script executed:
# Verify what happens when SingleLineEditor is rendered - check if onRun is essential
sed -n '25,75p' packages/bruno-app/src/components/SingleLineEditor/index.jsRepository: usebruno/bruno
Length of output: 1676
ð Script executed:
# Search for any other New Request handlers or Submit buttons
rg -n 'type.*submit\|button.*submit' packages/bruno-app/src/components/Sidebar/NewRequest/index.js -B2 -A2Repository: usebruno/bruno
Length of output: 40
ð Script executed:
# Final verification: confirm that SingleLineEditor's Enter key behavior with no onRun passed
sed -n '37,50p' packages/bruno-app/src/components/SingleLineEditor/index.js | grep -A15 "runHandler"Repository: usebruno/bruno
Length of output: 40
ð Script executed:
# Check if there's any other place where form submission could happen on Enter
sed -n '300,335p' packages/bruno-app/src/components/Sidebar/NewRequest/index.jsRepository: usebruno/bruno
Length of output: 1197
Rename isTextInput and add explanatory comment per coding guidelines
The variable name isTextInput conflates HTML input/textarea elements with CodeMirror's contenteditable host. Rename to isEditableTarget for clarity.
The handler's logic is non-trivial (preventing form submission when Enter targets non-editable elements) and needs a comment explaining the purpose per coding standards.
Suggested rename + comment
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.defaultPrevented) {
- const isTextInput
- = ['input', 'textarea'].includes(e.target.tagName.toLowerCase())
- || e.target.isContentEditable;
+ // Only submit form on Enter if the target is not an editable field
+ // (e.g. avoid submission when Enter is pressed in the URL editor)
+ const isEditableTarget
+ = ['input', 'textarea'].includes(e.target.tagName.toLowerCase())
+ || e.target.isContentEditable;
- if (!isTextInput) {
+ if (!isEditableTarget) {
e.preventDefault();
formik.handleSubmit();
}
}
}}Note: This change excludes contenteditable elements (like the URL editor) from form submission on Enter, which is a behavior change from the previous implementation. Ensure this is intentional and document in the PR if needed.
ðĪ Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/bruno-app/src/components/Sidebar/NewRequest/index.js` around lines
319 - 330, Rename the local variable isTextInput to isEditableTarget inside the
onKeyDown handler in the NewRequest component, and add a concise inline comment
above the logic explaining that the handler prevents form submission on Enter
when the event target is not an editable element (checks using e.target.tagName
and e.target.isContentEditable), so that inputs, textareas and contenteditable
hosts are allowed to accept Enter while other elements trigger
formik.handleSubmit; ensure the rename is applied where the variable is declared
and used and note in the PR that this change intentionally excludes
contenteditable elements (e.g., the URL editor) from submitting on Enter.
3 participants
Description
Fixes unintended form submission when pressing Enter during variable autocomplete in the New Request model.
Previously, pressing Enter would both:
This change ensures Enter only selects the autocomplete suggestion by respecting event handling and avoiding global submission.
Contribution Checklist:
Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
Publishing to New Package Managers
Please see here for more information.
Fixes #7215
Summary by CodeRabbit