The clear control occupies the right side of the slot
Aliases: clear button overlap · trailing icon collision · last character hidden
What it is
The clear cross is drawn on the slot’s inner trailing edge. Once the value is long, the last characters slide under the cross: the last glyph is invisible, and a press meant to edit the end fires clear. Clear-control inner-width collision counts the cross’s footprint against typeable width, so text stops before the control or yields the space. The issue is spatial theft, not when the cross appears, and not whether a clear can be undone.
Why it happens
Inner width is the horizontal budget characters may occupy. Stacking trailing widgets (cross, password eye, unit, counter) without extra padding steals that budget. Long values, large type, and long placeholders sacrifice the end first. If the caret can still walk into the covered region, people think they are clicking text while hit-testing awards the cross. A password field with both an eye and a cross doubles two targets into one corner and doubles mis-taps. The collision only erupts when clear appears with content: the empty slot looks roomy, then the right side narrows on the first character and the layout jumps.
Where it stops holding
Short values, a wide slot, and a tiny left-aligned cross never meet the end, so the collision stays latent. A multiline clear in the top-right only clips the first line’s end; lower lines stay safe, though a long first-line title still hits. When CSS pixels and the hot area disagree, it looks uncovered while a finger already hits the cross. In RTL, “trailing” is the reading start, so the cross clips the beginning rather than the end, which hurts more.
Applying it
- Reserve inner padding the clear (and other trailing widgets) own, so long values truncate or ellipsize before the control rather than running under it.
- Send a click on the last character to the caret, and a click on the cross to clear; do not overlap the two hit areas.
- Separate reveal and clear on a password field; do not stack them into one pile.
- Verify by typing until the right edge and checking that the last character is fully visible and that clicking it does not clear. Repeat at a large text size and with a password eye. Text under the cross, or a click-on-text that clears, means inner width still ignores the control.