Fixes for Editor switching to next field on pressing Enter

[ShreyamKeshri]

What does this PR do?

Fixes for Editor switching to next field on pressing Enter inside text area specific to Body component in Execution Create

Fixes appwrite/appwrite#10607

Test Plan

Reproduction Steps:

1. Go to the website and navigate to the Create Execution page in Appwrite.
2. In the Body section, open the text editor to enter request content.
3. Start typing some text.
4. Press Enter or Shift+Enter inside the editor.

The cursor goes to the next line but the Accordion closes when user presses Enter key.

Check the attached recording for reference

Screen.Recording.2025-10-08.at.02.21.52.mov

Related PRs and Issues

• Text Editor issue while creating function appwrite#10607

Have you read the Contributing Guidelines on issues?

Yes

Summary by CodeRabbit

• Bug Fixes
  • Prevents Enter in request body textareas from triggering parent actions, improving multiline editing.
• Accessibility
  • Improved keyboard/interaction handling and semantic role for request body inputs to enhance usability for keyboard and assistive technology users.

[coderabbitai]

Walkthrough

Added a wrapper div around two Body InputTextarea components with role="textbox", tabindex="-1", and an on:keyup handler that stops propagation when Enter is pressed. The change applies to both Body textareas; their placeholder text and value bindings remain unchanged.

Possibly related issues

• Text Editor issue while creating function appwrite#10607: Implements Enter-key propagation suppression in the Body textarea, matching the issue's objective to prevent Enter from moving focus or jumping to the next section.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly summarizes the primary change of preventing the text editor from switching fields when Enter is pressed, directly reflecting the PR’s intent and scope.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
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

---

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: 1

🧹 Nitpick comments (1)

src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte (1)

179-191: Simplify the wrapper and verify the approach.

The stopPropagation logic should prevent the Accordion from closing, but there are semantic and accessibility concerns:

1. Semantic HTML: role="textbox" on a div wrapping a textarea is incorrect per ARIA guidelines—textarea is already a textbox. Remove the role attribute.
2. Unnecessary wrapper attributes: tabindex="-1" on a non-interactive wrapper may confuse assistive technologies and isn't needed here.
3. Alternative approach: If InputTextarea supports Svelte event modifiers, consider placing the handler directly on the component.

Consider this cleaner approach:

-<div
-    role="textbox"
-    tabindex="-1"
-    on:keyup={(e) => {
-        if (e.key === 'Enter') {
-            e.stopPropagation();
-        }
-    }}>
-    <InputTextarea
-        placeholder="Enter request body here..."
-        id="body"
-        bind:value={body} />
-</div>
+<div
+    on:keyup={(e) => {
+        if (e.key === 'Enter') {
+            e.stopPropagation();
+        }
+    }}>
+    <InputTextarea
+        placeholder="Enter request body here..."
+        id="body"
+        bind:value={body} />
+</div>

Please verify that Enter and Shift+Enter now allow new lines in the textarea without closing the Accordion or jumping focus.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d81d166 and 71125b3.

📒 Files selected for processing (1)

• src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/execute-function/+page.svelte (2 hunks)

[HarshMN2345]

Maybe we can add native key event support to Input.Textarea in appwrite/pink instead of wrapping it in a div ,
This would eliminate the need for wrapper divs 👍

[ShreyamKeshri]

Hi @HarshMN2345 , Agree with the suggested change. I tried implementing that but was not able to make it work by passing the event inside textarea.

Any suggestions??
Currently trying by creating a CustomEvent and passing that inside Input.TextArea.