Autocomplete input text can visibly overflow under magnifier icon

Created on 3 August 2020, almost 4 years ago
Updated 16 October 2023, 8 months ago

Problem/Motivation

If an autocomplete input's text fills the input, the text will appear underneath the magnifying glass icon.

This is also an issue in Seven, but may be less noticeable due to the size of the inputs and icons.

There is a patch that included a fix that almost fully resolved the problem, but it resulted in autocomplete and text inputs not having the same widths at certain viewport widths - this discrepancy is easy to spot using a node form and adjusting the viewport width from narrow to wide.

Steps to reproduce

  • Set the claro theme as an administration theme
  • Find a form with an autocomplete input field such as a tags input that accepts multiple values ( In my case I used the default tags field in
    article content type )
  • Type a bunch of letters into the autocomplete field to fill it to the point that it fills the input all the way to the magnifying icon.
  • See that the letters will overlap with the magnifying icon

Proposed resolution

TBD

User interface changes

Before

After

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Claro 

Last updated about 1 hour ago

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024