Skip to content

Tweaks to autocomplete popover formatting

Created by: quinnkeast

Background

We're exploring a minimal prototype of search history as an autocomplete suggestion in an empty search input (#39944 (closed)). While making sure that the search history items were usable/legible, we did a few adjustments to the spacing and padding in the autocomplete dropdown content.

When we switched to CodeMirror for the search input and autocomplete dropdowns, the visual UI didn't receive explicit design consideration. As such, there's a few small changes we can make to improve the usability through style adjustments and timing changes.

Proposed changes

Visual proposal can be viewed in Figma.

The specific changes:

  • Right align the helper content.
    • When content is longer than can be shown: truncate the right side of the helper text with ellipses (note—use the single-character … rather than three dots ...).
  • Remove italics from helper content and reduce the font size a bit further to 0.75rem (to start—may need to adjust further).
  • Shift the top edge of the autocomplete popover ~5px lower, so that the top edge of an autocomplete dropdown aligns with the top edge of the search contexts popover.
  • Add a small delay (~100ms to start, we'll adjust from there) before displaying an autocomplete dropdown. The goal is to only show the dropdown after the user has paused typing, but quickly enough that it's not a noticeable delay. This change will prevent the dropdown from appearing in a spastic way.

Additional consideration

Right aligning the helper text means the Tab tip causes text jumping. This could be fixed by showing the Tab element absolutely, with a background colour + underlying gradient on top of the item; however, that this element exists at all is a UX workaround for the autocomplete dropdown not accepting Enter to select an item, which we weren't previously able to resolve. With the switch to CodeMirror, this is resolved in #39177.

If we were to enable this updated behaviour by default, we could remove the Tab helper altogether.

Additional consideration

Right aligning the helper text means the Tab tip causes text jumping. This could be fixed by showing the Tab element absolutely, with a background colour + underlying gradient on top of the item; however, that this element exists at all is a UX workaround for the autocomplete dropdown not accepting Enter to select an item, which we weren't previously able to resolve. With the switch to CodeMirror, this is resolved in #39177.

If we were to enable this updated behaviour by default, we could remove the Tab helper altogether.