primefaces / primefaces/primereact

Autocomplete: autoHighlight not working on option groups

Open
#8,248 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

The autoHighlight prop is not working on an Autocomplete component with option groups.
I feel like this is a bug, and not an intended behavior in case of grouped options.

I investigated a bit and found out that autoHighlight basically does this

DomHandler.addClass(itemToHighlight, 'p-highlight')
itemToHighlight.setAttribute('data-p-highlight', 'true')

on the ul's first child, which is the group header in case of grouped options. The result is that you don't get the autohighlight style on the first option, and you cannot press Enter to choose it.

I found a workaround for the style, by creating a custom onShow method that uses a ref to the Autocomplete component to retrieve the panel and its children.

  const onShow = () => {
    const panelElement = autocompleteRef.current?.getOverlay()
    if (panelElement) {
      const itemsWrapper = panelElement.firstChild
      const list = itemsWrapper?.firstChild

      let itemToHighlight: HTMLElement | null = null
      if (list && list instanceof Element) {
        for (const child of list.children) {
          if (child.classList.contains('p-autocomplete-item')) {
            itemToHighlight = child as HTMLElement
            break
          }
        }
      }

      if (itemToHighlight) {
        DomHandler.addClass(itemToHighlight, 'p-highlight')
        itemToHighlight.setAttribute('data-p-highlight', 'true')
      }
    }
  }

However, pressing Enter still won't work. I stopped there because I didn't have that much time to invest in this :)

Hope this'll get fixed
Thanks!

Reproducer

No response

System Information
npmPackages:
    primereact: ^10.8.5 => 10.8.5 
    react: ^18.3.1 => 18.3.1
Steps to reproduce the behavior
  • Create an instance of the Autocomplete component with grouped options and autoHighlight prop
  • The first option in the first group does not get highlighted on panel open
Expected behavior

The first group option should be highlighted and be selected on Enter

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the React Autocomplete component's autoHighlight handling for grouped options, focusing on how the first option is found when the group header is the list's first child. Verify the behavior with grouped options and Enter selection; done means the first group option is highlighted on panel open and can be selected with Enter.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.