Feature improve: When mouse move on an option item, it should become the current selected option item.

[qichunren]

See github top left search box for example.

[cmer]

Isn't that just changing the background with CSS on hover?

[ACPK]

@cmer @afcapel The stimulus-autocomplete example keeps the wrong aria-activedescendant value on the input field when the user uses the mouse. Any results that stimulus-autocomplete gave the class of "active" to would need the "active" removed when using the mouse. Additionally, the aria-activedescendant value needs to be set to the value of the result that the user is hovering over.

Solution

Add data-action="mouseenter->autocomplete#show" to results.

<li role="option" data-autocomplete-value="1" 
  data-action="mouseenter->autocomplete#show">
  Mockingbird
</li>

Add show to autocomplete.js

show(event)
  {
    if (event.target) this.select(event.target)
  }

[tmaier]

I think I was able to solve this with the following custom stimulus controller, which inherits stimulus-autocomplete:

import { Autocomplete } from 'stimulus-autocomplete'

const optionSelector = "[role='option']:not([aria-disabled])"

export default class extends Autocomplete {
  connect() {
    super.connect()
    this.resultsTarget.addEventListener('mouseover', this.onResultsMouseOver)
  }

  disconnect() {
    super.disconnect()
    if (this.hasResultsTarget) {
      this.resultsTarget.removeEventListener('mouseover', this.onResultsMouseOver)
    }
  }

  onResultsMouseOver = (event) => {
    if (!(event.target instanceof Element)) return
    const selected = event.target.closest(optionSelector)
    if (selected) this.select(selected)
  }
}

[Mecanik]

data-action="mouseenter->autocomplete#show"

This does not work for me. What exactly should change? Nothing changes. Could you share your HTML?

[til]

Here is another version of an extended autocomplete controller that solves this – the one above works great, but a small detail bothered me, especially when combined with a customization to automatically select the first option: when the mouse is already positioned in the area of the results target, the overlapping option will automatically be selected whenever the results change.

This version defers setting event listeners until the mouse is moved the first time.

import { Autocomplete } from 'stimulus-autocomplete'

const optionSelector = "[role='option']:not([aria-disabled])"

export default class extends Autocomplete {
  replaceResults(html) {
    super.replaceResults(html)

    this.resultsTarget.addEventListener("mousemove", (e) => {

      const option = e.target.closest(optionSelector)
      if (option) this.select(option)

      this.options.forEach((option) => {
        option.addEventListener("mouseenter", (e) => {
          if (e.target) this.select(e.target)
        })
      })
    }, {"once": true})
  }
}

I'd be happy to put this or another approach in a PR if there is interest, I think it makes sense for stimulus-autocomplete to have this behaviour out of the box.