Bug: Autocomplete jumps to a different (last?) value when the name is the same

Wappler General Bugs
#1

Wappler Version : 5.4.3
Operating System : W11
Server Model: Node
Database Type: Mysql
Hosting Type:Docker

Autocomplete jumps to a different (last?) value when the name is the same.

See:

2023.03.09 13.28 - 6070 - Bronco

To reproduce:

  1. Create a db query where you get an array of objects where the name equals
    This is what I get from the DB:
{
    "query": [
        {
            "id": 1,
            "name": "user 1",
            "email": "email A"
        },
        {
            "id": 2,
            "name": "user 1",
            "email": "email B"
        }
    ]
}
  1. Create an autocomplete on the page, set up like so:
<input id="autocomplete1" name="autocomplete1" is="dmx-autocomplete" dmx-bind:data="get_users.data.query" optiontext="name" optionvalue="id">
            <p>Name of user (autocomplete.value): {{autocomplete1.value}} </p>
  1. Type ‘user’ and select the first user
  2. Let the input field blur by clicking somewhere else, it’ll jump to the second user.
#2
#3

You probably don’t want duplicates in the autocomplete, why not include the email in the text field to make it unique.

<input id="autocomplete1" name="autocomplete1" is="dmx-autocomplete" dmx-bind:data="get_users.data.query" optiontext="name + ' (' + email + ')'" optionvalue="id">
            <p>Name of user (autocomplete.value): {{autocomplete1.value}} </p>

The problem is that the autocomplete validates the text input on blur, it checks if the text in the autocomplete input matches one of the items in the datasource and set the value to the found item. In your case it finds the text 2 times and sets it to the last value it found. By making the text field unique, for example include the email or id in it, you will prevent this problem.

#4

Could it not use the item’s value rather than the label for the validation? It is much more likely to be unique and finding another item with the same value during validation is much less likely to be problematic

#5

@patrick In my actual application, I’m using the autocomplete for products.

Products can have the same name yet different properties.
It would be a better user experience for our users if they can re-use names. Is what Ben says an option?

(Either way thanks for the info, I can at least make it unique for now)

1 Like