Skip to content

[TextField]: caret is clipped at the start of the input #575

Description

@ly-tempel-bitweb

Problem

With the caret at the start of a text, date or time field, most of it is invisible — Chrome draws the caret straddling the insertion point, and at offset 0 it falls outside the input's clip box. A regression from #561, which moved the field padding onto the box and left the input at padding: 0.

Solution

Give the input padding-inline-start: 1px with margin-inline-start: -1px, so the caret has room while the value stays at the same position (1px border + 8px field padding). tedi-date-picker is unaffected — its input keeps its own 8px left padding.

Examples and information

Affects .tedi-text-field (TextField and DateField, which projects it) and
.tedi-time-field__input.

Metadata

Metadata

Labels

tedi-readyTEDI-Ready component issue

Type

Projects

Status
Code review

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions