Fix for 'Enter' key double submission issue

[james-ha-bruno]

fixes: #6355

Description

Fix:

• Modal Enter key causes double form submission when Save button is focused #6355

When users navigate to a modal's Save/Create button using Tab and press Enter, the form action was being triggered twice.

This caused:

• Duplicate toast notifications (e.g., "Collection renamed!" appearing twice)
• Race conditions in operations like Git branch creation (fatal: Unable to create '.git/index.lock': File exists)
• Duplicate environment/collection entries being created

Root Cause:
The Modal component has a document-level keydown listener that calls handleConfirm() on Enter. When a type="submit" button is focused, pressing Enter also triggers the button's native click event, resulting in handleConfirm() being called twice.

Fix:
Skip the document-level Enter handler when a type="submit" button is focused, allowing the native button click to handle submission (single execution).

Very small code change:

case ENTER_KEY_CODE: {
  // Skip if a submit button is focused - let native button click handle it to avoid double-fire
  const isSubmitButton = event.target?.type === 'submit';
  if (!shiftKey && !ctrlKey && !altKey && !metaKey && handleConfirm && !isSubmitButton) {
    return handleConfirm();
  }
}

Contribution Checklist:

• I've used AI significantly to create this pull request
• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.

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.

Recording

No longer causing duplicate environment creation:

fix-dupe-enter-bug.mp4

[coderabbitai]

Walkthrough

Modified the Modal component's ENTER key handler to detect when the event target is a submit button and skip calling handleConfirm in that case, preventing duplicate submissions while preserving existing behavior for non-submit contexts.

Changes

Cohort / File(s)	Summary
Modal ENTER key behavior packages/bruno-app/src/components/Modal/index.js	Added conditional check on ENTER key press to skip handleConfirm when the event target is a submit button, preventing double-submission while maintaining existing guard conditions (no Shift/Ctrl/Alt/Meta modifiers and handleConfirm presence)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Review the conditional logic for submit button detection
• Verify no regression in existing ENTER behavior for non-button contexts
• Confirm the fix aligns with form submission semantics

Possibly related issues

• Modal Enter key causes double form submission when Save button is focused #6355: Directly addresses the double-submission issue with modal Save buttons by preventing redundant handleConfirm invocation when ENTER is pressed on a submit button.

Poem

🔘 A button pressed, then pressed once more—
Enter twice brings doubt and woe.
Now modals guard against the press,
One submission brings success! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and clearly identifies the main fix: preventing double submission on Enter key press in modals.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/bruno-app/src/components/Modal/index.js (1)

88-90: ENTER guard on focused submit button correctly prevents double-submit

The new isSubmitButton guard does exactly what the PR describes: when the Save/Create button (type submit) is focused, the document-level ENTER handler no longer calls handleConfirm, so only the native button click path fires once. Existing behavior for ENTER in other focused elements is preserved, and the implementation follows the existing style and coding guidelines.

If you want to harden this further (optional), you could also skip when the event has already been handled elsewhere:

case ENTER_KEY_CODE: {
  // Skip if a submit button is focused - let native button click handle it to avoid double-fire
  const isSubmitButton = event.target?.type === 'submit';
  if (!event.defaultPrevented && !shiftKey && !ctrlKey && !altKey && !metaKey && handleConfirm && !isSubmitButton) {
    return handleConfirm();
  }
}

But as-is, this change cleanly fixes the reported duplicate submission issue without regressions in the Modal’s ENTER behavior.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0197ae3 and de7d3ce.

📒 Files selected for processing (1)

• packages/bruno-app/src/components/Modal/index.js (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions. () => {} is good
No space between function name and parentheses. func() not func ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly

Files:

• packages/bruno-app/src/components/Modal/index.js

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: SSL Tests - Windows
• GitHub Check: SSL Tests - Linux
• GitHub Check: SSL Tests - macOS
• GitHub Check: Playwright E2E Tests
• GitHub Check: CLI Tests
• GitHub Check: Unit Tests