fix(web): make input focusable in the whole component's area - #794
Conversation
There was a problem hiding this comment.
🟡 Changes recommended
The newly added .tiptap { flex: 1; } selector is overly broad and can unintentionally affect unrelated TipTap instances in host apps unless scoped to the component.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR addresses web focus behavior for EnrichedTextInput when minHeight (or similar sizing props) creates extra empty area below the first line, by adjusting CSS layout so the editor surface can expand to fill the component’s height.
Changes:
- Add flexbox layout to the
eti-editorcontainer so its child can stretch vertically. - Add a
flex: 1rule intended to make the TipTap/ProseMirror editor surface fill the available space.
File summaries
| File | Description |
|---|---|
| src/web/EnrichedText.css | Adds flexbox rules to make the editable area expand and become focusable across the full component height on web. |
Review details
- Files reviewed: 1/1 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
There was a problem hiding this comment.
🟢 Approval recommended
The change is narrowly scoped to web CSS, aligns with existing DOM assumptions used in Playwright helpers (e.g., .eti-editor .ProseMirror), and directly addresses the reported focus behavior without introducing API changes.
Review details
- Files reviewed: 1/1 changed files
- Comments generated: 0 new
- Review effort level: Lite
Summary
Fixes #793
All web e2e tests pass. Effectively, nothing should have changed visually.
Test Plan
In the example app, experiment with
height,minHeightandmaxHeightprops. Write some text, so the input becomes scrollable. Verify everything looks in place.Screenshots / Videos
When
minHeightwas set:Before:
Screen.Recording.2026-09-10.at.14.47.29.mov
After:
Screen.Recording.2026-09-10.at.14.46.04.mov
Compatibility
Checklist