Combobox dropdown wrong behavior

[ygorko]

Steps to reproduce:

1. Navigate to https://leaverou.github.io/awesomplete/
2. Enter 'a' in combobox example
3. Select some item.
4. Click on dropdown button to open list Expected result: all items in list Current result: only items with letter 'a' in list

[LeaVerou]

I'm inclined to agree that this is a usability bug, but not 100% sure that the expectation is to show all options. Could others weigh in?

[vlazar]

The point about text input having some selected value like ARIA while dropdown only showing the items with letter 'a' in list, which is not even in text field anymore I would consider a separate bug.

As for expectations, I think they are different for different people. Check this combobox example: https://jqueryui.com/autocomplete/#combobox

Use case 1:

1. Enter 'a' in combobox example
2. Select ActionScript
3. Click on dropdown button to open list

It shows all items in list. If we take this as example, then we can consider this a usability bug.

Use case 2:

1. Enter 'a' in combobox example
2. Click on dropdown button to open list

It clears text input saying that 'a' didn't match any input and closes dropdown. So you can only select or type in existing options.

We don't have behavior for Use case 2. If we type 'a' and do not select any item, then clicking dropdown continues to show only items with letter 'a' in list. And I saw such examples too.

[ghost]

Hello,

The expected behavior is subjective and will depend on the use case.

I expected, like ygorko, that if there is an A written on it, when displaying the combobox, all the suggestions appear with A ... What I did not expect is that after choosing an option, for example ARIA, when redeploying follow the suggestions of A originally typed.

I expected that after selecting an option, when displaying the combobox, all the available options would appear, because that is what happens if I delete the text with the keyboard, and it would be absurd if only the selected suggestion appears, because then only one option would appear.

I tried to assign the INPUT in the onclick () an empty string, to simulate the behavior of the keyboard, but the suggestions are not modified, because the event does not trigger because the content is not greater than 0.

It might be useful to leave the current behavior, but add a method that cleans the suggestions, to be able to reinitialize them programmatically, such as comboplete.clearSuggestions()

Thanks for a great job!

[dillydadally]

I personally do not believe the expected behavior in this case is very subjective from a usability standpoint, as in my mind there seems to be a clearly superior option - show the whole list.

The purpose of a combobox is a little different from the purpose of an autocomplete field. The purpose of an autocomplete field is to imitate a text input field, while the purpose of a combobox is to imitate a Select field. Thus, the behavior should imitate a select field. Users click the arrow on a select field to be able to manually search through the entire list of items to find their answer - in fact, they might not even realize the field is a combobox and isn't a normal select field when doing this. They might even become confused when items are missing from the list when they click the down arrow and not understand why (I was at first, so this is speaking from experience - and I programmed it!).

Additionally, if you type an option out and then come back to the combobox later and click the arrow, the only option it most likely shows in the dropdown is the one you already typed into the box. This actually confused me the first time and I thought it was bugged. What good is this behavior? How is it going to help the user to show a single item - the one they already have in the box - when they click the arrow?

More importantly though, I believe the current behavior is flat out bugged! It does not actually use the text in your input to filter when you click the arrow. Instead, it uses only the text the user manually typed before they selected an item in the list.

To replicate this and see what I mean, try creating a list with multiple programming languages and make sure both Java and JavaScript are in the list. Now, type the letter J and select JavaScript. Now click the arrow. You'll notice that even though JavaScript is the text in the search box, Java is also in the drop down (even though JavaScript, the word in your input, is not contained in the word Java).

So with the current behavior, think about how confused the user would be if they were to type j and select Javascript, and then after filling out the form go back to that combobox and click the arrow to look for a different answer, only to be shown what looks like a completely random list of elements (as he no longer remembers what he originally typed). Worse yet, if it's a long list where what he originally typed matches many things, he might not even realize that the list is being filtered and miss available options without ever realizing it.

In my opinion, the clear answer in this case is to have the dropdown arrow show the entire list, as that is the expected behavior with a select element and I don't see the use in having the button show only the item you already have in the box 9/10 times. However, I would be fine if this were an option or if we could change the behavior with something like comboplete.clearSuggestions() as mentioned above. Alternatively, if someone wanted the opposite behavior, they could just call comboplete.evaluate() on clicking the button.