patternfly-elements icon indicating copy to clipboard operation
patternfly-elements copied to clipboard

<pfe-autocomplete> cursor becomes lost under clear button with long queries

Open bexter89 opened this issue 1 year ago • 3 comments

Description of the issue

the CP-Search-Autocomplete uses version 1.12.3 under the hood.

The "Search the Customer Portal" search box on the https://access.redhat.com/ is unusable with long queries.

See: https://issues.redhat.com/browse/CPCORE-11969

Steps to reproduce

  1. Go to access.redhat.com
  2. Click on the search input in the hero and type a very long string
  3. Once the cursor goes under the X button on the right, you can't see what you're typing or editing anymore.

Expected behavior

as a user I expect for he cursor to remain visible as the string gets longer

Image

bexter89 avatar Dec 13 '24 21:12 bexter89

We don't have any changes to the 1.x series planned. That being said, <pf-select variant="typeahead"> is available in version 4.0.0 of this library. Would you be interested in working with us to integrate that element into your application?

bennypowers avatar Jan 14 '25 16:01 bennypowers

@bennypowers would it be possible to add the typeahead variant to a new <pf-input>? I feel like the old <pfe-autocomplete> is more like a text input than select.

markcaron avatar Jan 20 '25 20:01 markcaron

Discussed in office hours this morning. This seems to be a good candidate for RHX Elements, since this pattern doesn't exist (AFAIK) in PatternFly and we don't have any official RHDS designs for this yet. The quickest route would be through RHX as—potentially—a combination of elements:

  • <rhx-datalist>
  • <rhx-combobox>
  • <rhx-textinput>

Up for debate. Might need some discovery on what composable bits make up a search autocomplete.

However, once @zeroedin's PR for <rhx-grid> is merged we can begin adding other RHX Elements.

CC: @bexter89 @diwanshi @ArathyKumar

markcaron avatar Feb 03 '25 14:02 markcaron