Skip to content

fix(web): make input focusable in the whole component's area - #794

Merged
hejsztynx merged 4 commits into
mainfrom
@ksienkiewicz/fix-web-input-focus-range
Sep 11, 2026
Merged

hejsztynx merged 4 commits into
mainfrom
@ksienkiewicz/fix-web-input-focus-range

Conversation

@hejsztynx

@hejsztynx hejsztynx commented Sep 10, 2026

Copy link
Copy Markdown
Collaborator

Summary

Fixes #793

All web e2e tests pass. Effectively, nothing should have changed visually.

Test Plan

In the example app, experiment with height, minHeight and maxHeight props. Write some text, so the input becomes scrollable. Verify everything looks in place.

Screenshots / Videos

When minHeight was set:

Before:

Screen.Recording.2026-09-10.at.14.47.29.mov

After:

Screen.Recording.2026-09-10.at.14.46.04.mov

Compatibility

OS Implemented
iOS
Android
Web

Checklist

  • E2E tests are passing
  • Required E2E tests have been added (if applicable)

Copilot AI lite review requested due to automatic review settings September 10, 2026 12:48

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 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-editor container so its child can stretch vertically.
  • Add a flex: 1 rule 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.

Comment thread src/web/EnrichedText.css Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 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

Comment thread src/web/EnrichedText.css
Comment thread .playwright/tests/images.spec.ts
@hejsztynx
hejsztynx merged commit f0fea12 into main Sep 11, 2026
8 checks passed
@hejsztynx
hejsztynx deleted the @ksienkiewicz/fix-web-input-focus-range branch September 11, 2026 18:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Can't focus by clicking below the first line on web with minHeight

4 participants