[Bug]: Combo Box does not support default selection use case

vsnichols commented 12 months ago

Package

@carbon/react

Browser

No response

Package version

N/A

React version

No response

Description

This is a UX bug - the Combo Box does not currently support a default selection use case, where a default option is selected by default but a user can then type ahead to choose another option.

This is a very common use case, because it is often helpful to suggest a default selection to save the user time.

This bug fix is needed because we have multiple use cases where we need a combo box because user is working at scale.

Example: User has 50 resource groups in an account, so we want to use a combo box, but we want to default to their default resource group.

Actual vs Expected

Actual:

On focus type cursor is displayed but user cannot type
Preselected option does not have a check to indicate it is selected

Expected

On focus user can immediately start typing to filter selections
Check indicates that Dallas is pre-selected
If user types and filters to another choice and then selects it, that choice will have check.

This bug fix is needed to support a number of high profile projects.

Reproduction/example

N/A

Steps to reproduce

This is always the behavior - it is more of a UX bug

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

IBM Cloud PAL / Platform Next / Global Experiences

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems

vsnichols commented 12 months ago

FYI @aagonzales @jeanservaas @laurenmrice

vsnichols commented 12 months ago

From our dev:

To be clear, it’s not that combobox doesn’t support a default selection. it does (see initialSelectedItem in https://react.carbondesignsystem.com/?path=/docs/components-combobox--overview#overview ).

But the default isn’t reflected in the UI unless the dev passes a value prop, which is the cause the typing issue.

And the preselected selection has no check to indicate that it is selected.

laurenmrice commented 12 months ago

Hey @vsnichols , this should eventually be resolved with the work that comes out of this umbrella issue #6102

tw15egan commented 12 months ago

@vsnichols this functionality should already exist, unless I'm missing something: https://stackblitz.com/edit/github-ndeemc-cdowdo?file=src%2Findex.scss,src%2FApp.jsx

initialSelectedItems should update the UI to show the item in the combobox, as well as the check, and should still allow typing.

thyhmdo commented 12 months ago

Discussed this with @vsnichols and thank you @tw15egan to clarify that we do have the capabilities already in the code. This is a bit different problem. They expect to have a pre-selected combobox option once the user first comes to the page instead of having a blank option and it's not selected. We should discussed this with @mbgower if this is the same case with Select which has the pre-secleted option.

tw15egan commented 12 months ago

@thyhmdo Yeah isn't that what initialSelectedItems is doing in the example I provided? When I open my example, "Dallas" is preselected in the Combobox

tay1orjones commented 11 months ago

I agree - if this behavior is not working we need a clear code reproduction in a stackblitz with the link posted back here. It's hard to know exactly what's going wrong without seeing the issue firsthand.

mbgower commented 11 months ago

I think that if there is a preselected value, there are 4 possible ways this triggers, all of which potentially have slightly different interactions:

you open it with keyboard (via Enter)
you open it with keyboard (via DownArrow)
you open with pointer (via tapping on the chevron)
you open with pointer (via tapping in the input field)

I'll note that there are a LOT of possible interactions, and I don't know that any one is 'correct'.

If you have a look at this example in APG (and others), there are a lot of different ways to skin a cat. (BTW, you'll also note that they've managed in that demo to have no value selected to being with, and yet ""/blank is not in their list of options; this seems to make a liar out of my statement that the empty value needs to exist. Might be a product of it being a combobox?)

Opening by Enter My expectation here is that this would open and the currently selected item would have focus. There is the potential that Enter just toggles this open and closed, without moving focus to the list
Opening by DownArrow My expectation is that this would open and put focus on the selected item -- which by the way, traditionally would be the first item in the list. Maybe that gets a little 'odd' when the list is in a predesignated order...?
Opening with chevron activation What we saw the other day was that this expanded the list but did NOT put focus in the input (i.e., no flashing cursor). I was surprised by this, but that seemed to be the behaviour. I couldn't see any particular reason it wasn't the same as clicking anywhere in the input to open.
Opening by clicking in input Opens list, flashing cursor in input, I assume like all the other others, the focus would be on the item currently selected

For all these, I'd need to investigate whether the convention is that the input is blank (even though there's an item 'selected'). I've seen some where the user would clear the input to start typing afresh. That seems logical to me. For instance, if the item selected were "English" and I wanted to select "English - United States", it seems reasonable I would either arrow down to that line (with the input updating to each focused value as I did so) or I would just keep typing from the end of "English", where the cursor was flashing.

That said, there is a very elegant version of this in APG without autocomplete that shows how this does not need to be so. They also do something interesting, in that the current value is populated and selected in the input, so that the second you type you replace the current value. That also makes a lot of sense. (Note also that they do not open the dropdown on Enter, speaking to my 'no real right/wrong way' comment). YOu'll also note that they don't indicate the selected one in the list on open. It's a really different approach!

vsnichols commented 11 months ago

Hey all, will see if our dev can create the stackblitz. A major part of the issue is that currently when the pre-selected option appears it blocks the user from typing and there is not a way to unblock.

carbon-design-system / carbon