Autocomplete won't display selected option's text if text is fully typed

[AlexPeret]

hi!

I've figured the input field won't show the text from selected option whenever the user types in the complete option's text.

You can simulate the issue by running the Livewire Autocomplete Demo.

Steps to reproduce the issue:

1. load the main page
2. type in one of the options completely. e.g. Laron Cole
3. select the option by clicking on it

Result:
the input field won't show the option's text (see images attached).

Typing the following options do work:

• Laron Col
• Laron cole

While debugging it, I've figured adding the line below to method setSelected (from vendor/joshhanley/livewire-autocomplete/resources/views/autocomplete.blade.php) fixes the issue.

setSelected($dispatch, selected) {
    this.decoupledValue = null
    this.value = '' // this one
    this.value = typeof selected === 'object' && selected.hasOwnProperty(this.searchAttribute) ? selected[this.searchAttribute] : selected
    this.selected = typeof selected === 'object' && selected.hasOwnProperty(this.idAttribute) ? selected[this.idAttribute] : selected
    $dispatch((this.name ?? 'autocomplete') + '-selected-object', selected)
    $dispatch((this.name ?? 'autocomplete') + '-selected', this.selected)
    $dispatch((this.name ?? 'autocomplete') + '-input', this.value)
},

I believe it is due to Alpine.js' $watch function caching the previous value and preventing the last change. Unfortunately, I don't have enough knowledge of Alpine.js to debug this problem further.

Thanks,
Alex

Before clicking on the option:

After clicking on the option:

[joshhanley]

@AlexPeret thanks for reporting!

Ah yeah I think you are right, Alpine's $watch function won't fire if it thinks the value hasn't changed, so what you are seeing makes sense to me.

I will try to have a look into it over the weekend 🙂