fix(code-editor): prevent modal from closing when escape is pressed in search box

[TejasQ]

Problem

Pressing Escape inside the AceEditor search text field was closing the code editor modal, preventing users from closing the search box with Escape.

Solution

Added a check in the modal's escape handler to detect if the AceEditor search box input (input.ace_search_field) is visible in the viewport. If the search box is visible, the escape handler returns early, allowing AceEditor to handle the Escape key to close the search box instead of closing the modal.

Changes

• Modified onEscapeKeyDown handler in CodeAreaModal to check for visible search box input before processing escape key
• If search box is visible, escape key is handled by AceEditor (closes search box)
• If search box is not visible, normal modal close behavior applies (with confirmation dialog for unsaved changes)

Testing

• Open code editor modal
• Press Ctrl+F (or Cmd+F) to open search box
• Press Escape - search box should close, modal should remain open
• Press Escape again - modal should close (or show confirmation if there are unsaved changes)

Summary by CodeRabbit

• Bug Fixes
  • Fixed Escape key behavior in the code editor. The search box now properly handles Escape key presses without closing the modal.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Adds a guard in onEscapeKeyDown to detect AceEditor search box visibility. If visible, the function returns early to allow AceEditor to handle the Escape key; otherwise, existing modal close logic proceeds. This prevents unintended modal closure when the search box is active.

Changes

Cohort / File(s)	Summary
AceEditor Search Box Escape Handling src/frontend/src/modals/codeAreaModal/index.tsx	Added conditional guard in onEscapeKeyDown to check if AceEditor search field (.ace_search_field) is visible via offsetParent. Returns early if visible to delegate Escape key handling to AceEditor; otherwise proceeds with existing modal close or confirmation flow.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify DOM selector .ace_search_field correctly targets the AceEditor search input
• Confirm offsetParent visibility check works consistently across supported browsers
• Test Escape key behavior with search box open vs. closed to ensure intended interactions

Pre-merge checks and finishing touches

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 2 warnings, 2 inconclusive)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	PR modifies CodeAreaModal's onEscapeKeyDown handler with new guard logic to check AceEditor search field visibility, but no corresponding test coverage has been added.	Add test file (e.g., index.test.tsx) with regression tests verifying: (1) Escape in search box closes search without closing modal, (2) Escape still closes modal when search box not visible.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Test File Naming And Structure	⚠️ Warning	PR modifies onEscapeKeyDown handler in CodeAreaModal but lacks corresponding test files following repository testing conventions.	Create codeAreaModal.test.tsx with tests for Escape key behavior: search box close, modal close, and unsaved changes scenarios.
Test Quality And Coverage	❓ Inconclusive	Unable to locate test files or the modified codeAreaModal implementation file in the repository to assess test coverage for the escape key handler bug fix.	Provide the actual implementation changes, test directory structure, testing framework details, and any related test files to properly evaluate this check.
Excessive Mock Usage Warning	❓ Inconclusive	No test files exist for the CodeAreaModal component to assess mock usage.	Add test files for the modified component to enable proper assessment of mock usage patterns.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: adding a guard to prevent modal closure when Escape is pressed in the AceEditor search box.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/frontend/src/modals/codeAreaModal/index.tsx (1)

175-186: Good approach to prevent unintended modal closure.

The logic correctly detects the AceEditor search box visibility and returns early to allow AceEditor to handle the Escape key. The visibility check using offsetParent !== null is a well-established pattern.

Optional: Scope the querySelector to this modal instance

Currently, document.querySelector("input.ace_search_field") searches the entire document and could potentially match search inputs from other AceEditor instances if multiple modals or editors exist on the page. While this is unlikely to cause issues (since typically only one modal is open at a time), you could make this more robust by scoping the query to this modal's container if you have a ref available.

For example, if you had a modal container ref:

const modalRef = useRef<HTMLDivElement>(null);

// In the handler:
const searchInput = modalRef.current?.querySelector(
  "input.ace_search_field"
) as HTMLInputElement;

However, given the current architecture and typical usage pattern (one modal at a time), the current implementation should work fine.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ba68eea and b6f3b7a.

📒 Files selected for processing (1)

• src/frontend/src/modals/codeAreaModal/index.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-07-11T22:12:46.255Z

Learnt from: namastex888
Repo: langflow-ai/langflow PR: 9018
File: src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx:244-244
Timestamp: 2025-07-11T22:12:46.255Z
Learning: In src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx, the inconsistent showLineNumbers setting between Step 1 (false) and Step 2 (true) in the API modal is intentional to prevent breaking the modal height. Step 1 uses showLineNumbers={false} to save vertical space while Step 2 uses showLineNumbers={true} for better readability of longer code.

Applied to files:

• src/frontend/src/modals/codeAreaModal/index.tsx

⏰ 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). (41)

• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 40/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 39/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 34/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 31/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 37/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 32/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 38/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 27/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 36/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 29/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 33/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 35/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 26/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 21/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 28/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 23/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 24/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 25/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 30/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 22/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 20/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 9/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 18/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 19/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 15/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 17/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 14/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 11/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 13/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 16/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 3/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 12/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 10/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 5/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 7/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 6/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 8/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 4/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 2/40
• GitHub Check: Run Frontend Tests / Playwright Tests - Shard 1/40
• GitHub Check: Test Starter Templates

🔇 Additional comments (1)

src/frontend/src/modals/codeAreaModal/index.tsx (1)

188-201: Clean integration with existing modal close logic.

The new search box check integrates well with the existing escape key handling. When the search box is not visible, the code proceeds with the original behavior: closing the modal if there are no changes, or showing the confirmation dialog if there are unsaved changes (and the autocomplete popup isn't open).