fix: prevent space key from being swallowed in shareable playground chat input

[octo-patch]

Fixes #12731

Problem

In the shareable playground (/playground/<flowID>), typing a space in the chat input would be silently dropped, so "this is a phrase" became "thisisaphrase".

The root cause: the outer div container wrapping the textarea has an onKeyDown handler that calls e.preventDefault() for Space and Enter key events. When a user types a space inside the textarea, the keydown event bubbles up to the div, and e.preventDefault() is called on the same event object. Because the browser evaluates defaultPrevented after all handlers complete (including bubbled ones), this suppresses the default action of inserting the space character into the textarea.

Solution

Add the same guard that already exists in the playgroundComponent version of the same handler:

const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
  const target = e.target as HTMLElement;
  // Don't intercept keyboard events that originate from the textarea
  if (target.closest("textarea")) {
    return;
  }
  // ... rest of handler
};

The fix only touches src/frontend/src/modals/IOModal/components/chatView/chatInput/components/input-wrapper.tsx, which is the code path used by the shareable playground page (via CustomIOModal → IOModal). The sibling component in playgroundComponent/ already had the correct guard.

Testing

• Verified the fix by code review: e.target.closest("textarea") returns the textarea element when events originate from it, so the handler exits early without calling e.preventDefault().
• Regression: the onKeyDown handler still correctly handles Space/Enter when the outer div itself has focus (e.g. keyboard navigation), redirecting focus to the textarea.

Summary by CodeRabbit

• Bug Fixes
  • Resolved an issue where keyboard input in the chat message textarea was being interrupted, preventing normal text entry and key functionality.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 24105d29-db08-4105-b2c7-62f8aca71804

📥 Commits

Reviewing files that changed from the base of the PR and between 9aae6de and f6386ed.

📒 Files selected for processing (1)

• src/frontend/src/modals/IOModal/components/chatView/chatInput/components/input-wrapper.tsx

---

Walkthrough

Modified the onKeyDown event handler in InputWrapper to detect event origin by checking if the event target is a textarea element, and early-return before key interception logic when applicable. This prevents unwanted preventDefault() calls that were blocking space character insertion in textarea fields.

Changes

Cohort / File(s)	Summary
Input Handler Event Fix src/frontend/src/modals/IOModal/components/chatView/chatInput/components/input-wrapper.tsx	Added textarea origin detection in onKeyDown handler using e.target.closest("textarea") to prevent premature key event preventDefault, allowing normal space character insertion in textarea elements.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

---

Important

Pre-merge checks failed

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

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

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	PR regression fix for space stripping bug lacks any regression tests or test coverage for the textarea origin guard fix.	Add regression tests verifying space key handling in textarea and that preventDefault is not called for textarea events.
Test Quality And Coverage	⚠️ Warning	PR modifies InputWrapper to fix space character handling but provides no test coverage for the fix or keyboard event logic.	Create unit tests validating textarea keyboard events bypass preventDefault, and add e2e tests confirming spaces are preserved in chat input.
Test File Naming And Structure	⚠️ Warning	Pull request modifies input-wrapper.tsx to fix event handling but lacks corresponding test file following the codebase's established *.test.tsx naming convention in tests/ directories.	Create tests/input-wrapper.test.tsx to verify the bug fix prevents space/enter key event interception and maintains existing event handling logic.
Excessive Mock Usage Warning	❓ Inconclusive	Unable to locate or verify test files associated with the input-wrapper.tsx changes to assess mock usage patterns.	Provide test file contents modified or added in this PR to evaluate whether mocks are used excessively relative to the code changes.

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly summarizes the main fix—preventing space characters from being removed in the shareable playground chat input.
Linked Issues check	✅ Passed	The code change correctly implements the fix by adding a guard to detect event origin in the textarea and prevent default behavior only when appropriate, directly addressing the space-stripping regression in issue #12731.
Out of Scope Changes check	✅ Passed	All changes are scoped to input-wrapper.tsx and directly address the regression; no unrelated modifications were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}