Using the dropdown with a value already selected only shows the already-selected option

[alecgibson]

Screenshot

Reproduction steps

1. Set up a progressively-enhanced select element with a dropdown arrow
2. Select an item
3. Click on the dropdown arrow
4. I can only see the item I have already selected

What I expect to happen

When I'm clicking on the dropdown arrow, expect to see all the available options (as if the box was clear), instead of just being able to choose the option I've already chosen.

[edwardhorsford]

Thanks @alecgibson.

What I think should happen is that when you click on the arrow, it should select all content in the input (as it does if you focus the input), but also show all entries. This allows the user to start typing to use the autocomplete.

[edwardhorsford]

This came up in a research session today. The user picked an item somewhat on a whim, but when they tried to change it by clicking on the arrow, only saw the selected item. They then commented aloud that they weren't 'allowed' to change the result.

After a bit of frustration they wondered aloud if they could try deleting the text - which eventually got them back to where they wanted - but still, not great.

---

Reading back on my comment from 2017, I still agree that's a good approach - if the arrow is enabled, you should always be able to click on it to see all the results.

[edwardhorsford]

An alternate solution I don't like as much might be to put some kind of 'clear' or 'x' to give more affordance to how you reset things.

[alecgibson]

@edwardhorsford for what it's worth, I think we added an "x" icon next to the dropdown in our implementation on the Audit Tool - I still think it would be neater to have the solution you mentioned in your 2017 comment, though.

[edwardhorsford]

@alecgibson could you point me at that code?

[alecgibson]

https://github.com/alphagov/content-audit-tool/blob/d78516bc0fb9dd8075bcf97780863ac4e1ef37d8/app/assets/javascripts/multiselect-autocomplete.js#L106-L116

[edwardhorsford]

@alecgibson thanks! are you able to share a screenshot of what it looks like?

[alecgibson]

@edwardhorsford I'm not actually working at GDS anymore, and don't have my VM set up, so I can't. Sorry! Maybe @pmanrubia can help?

[alecgibson]

Actually @edwardhorsford I found an old screenshot (from this PR):

[HughePaul]

If a select box is enhanced, users still expect it to behave as a select box and show all values (if showAllValues is true) when clicking/dropping down