The suggestion list must not cover the text being typed
Aliases: typeahead overlay · combobox popup · list covering field
What it is
Autocomplete opens suggestions while someone types. If the list covers the characters in the slot, the caret, or a format hint, people cannot see what they just typed or compare it with a suggestion. Autocomplete occlusion of input keeps the list off the region still being edited: usually opening downward, flipping up when space runs out, with the slot itself always exposed. The issue is visibility of the input, not whether suggestion order rewrites under the pointer, and not whether arrows can walk the list.
Why it happens
Comparison is the core operation: prefix in the slot against full items in the list. Cover the prefix and comparison falls back on memory; people pick an item that “looks like” a prefix they have already changed, or keep dismissing the list to check what they wrote. On mobile, the keyboard leaves a slit of viewport, and a downward list is even more likely to sit on the slot. An “elegant” panel absolutely positioned in the viewport center covers the field the same way. Occlusion also cuts editing: fixing a mistyped letter requires closing the list first, which is blamed on autocomplete. The list may cover an unrelated footer; it may not cover the line it is completing.
Where it stops holding
When the slot sits on the bottom edge with no room below, the list can only open up; it must still sit outside the slot, not on top of it. A full-screen search that pins the slot at the top and gives the rest to the list is page partitioning, not occlusion. Suggestions rendered inside the slot (a grey inline suffix) are a different control, fine so long as the suffix does not cover the caret or typed characters. After font scaling the slot grows, and a “below” coordinate may already overlap the slot; recompute from the live slot box.
Applying it
- Anchor the list on the slot’s outer edge, down by default; flip up when the bottom is short, using the live slot box, and do not cover the slot.
- After the keyboard rises, scroll the slot into the remaining viewport, then open the list, so list and keyboard do not erase the slot together.
- Do not make the list a page-covering modal with the slot underneath.
- Verify by typing a few characters and checking that slot text, caret, and outside label remain fully visible. Any clip by the list is occlusion. Repeat on a bottom-edge field and with the phone keyboard up.