Fluentui: Combo Box multi select text is not consistent with dropdown

[PatoBeltran]

Environment Information

• __Package version(s)__: 6.147.0

Please provide a reproduction of the bug in a codepen:

https://codepen.io/PatoBeltran/pen/oORabQ

Issues

There are two inconsistencies:

1. 
   Actual behavior:

When using the combo box in multi-select, if you have the callout open and you are choosing the options, the text that has the selected options is empty until you loose focus of the combo box.

This same behavior on the dropdown updates that text correctly every time you select/deselect an option.

Expected behavior:

The two components should behave consistently since they are really similar. I would expect the combo to update the text every time I select or deselect an option.

2.

Actual behavior:

If you open the combo and hover over the list, the focus stays on in the field itself, then if you dismiss by clicking away the focus is lost (I consider this the correct behavior).

On the other hand, in the dropdown, when you open it and hover over the list, the focus from the field is lost, but then if you dismiss the list by clicking away, the focus returns to the field and you need a second click to remove the focus from it.

Expected behavior:

The two components should behave consistently since they are really similar. I would expect the dropdown to keep focus while open and loose focus when clicking away.

[atneik]

Thank for noticing this @PatoBeltran.

@betrue-final-final, as per design how is multi-select handled by both components? Curious if above behavior is an engineering gap or as per by design.

[PatoBeltran]

There also seems to be another inconsistency between these two components:

If you open the combo and hover over the list, the focus stays on in the field itself, then if you dismiss by clicking away the focus is lost (I consider this the correct behavior).

On the other hand, in the dropdown, when you open it and hover over the list, the focus from the field is lost, but then if you dismiss the list by clicking away, the focus returns to the field and you need a second click to remove the focus from it.

Should I create a new issue for this or can we track both inconsistencies in this same issue?

[atneik]

@PatoBeltran, we can track them both here, just update the original description with the other inconsistency.

[PatoBeltran]

I updated the description to include both issues. Since one requires a fix in the combo box and the other requires a fix in the dropdown I would suggest to add back the Component: Dropdown tag to keep correct track of this issue.

[joschect]

This should probably be part of the refactor work that's being tracked in #6030

[atneik]

@joschect I agree. I talked with @betrue-final-final, and

1. They both should update the text field as the options are selected.
2. With an open list, when the focus is dismissed the focus should hop back to the text field.

@micahgodbolt Should I just add it to description in #6030

[micahgodbolt]

Yeah, if this is a desired outcome of the dropdown/comobobox conversion, add it to the #6030 main section.

[khmakoto]

@PatoBeltran this has been fixed in #11436 and you can see how in the webpage. Please let us know if you need anything else. Thanks!

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!