☂ ComboBox/Dropdown: Open issues and history for convergence

[micahgodbolt]

Component Details

Imports

Exports/ Component Breakdown

Intended Package

Code mockup/example

Code Sample

Types

Name	Type	Default Value	Description
className	string		Optional class name to be added to the root

Design Assets

Component Ownership

Deadlines

Todos

• Support Name prop
• Option to select all Feature Request : Option to select "All" in multi select dropdown #3726
• Align styling Dropdown and ComboBox in multi-select mode option keyboard navigation not aligning to designs #8584
• Ensure aria roles are appropriately announced dropdown: screen reader not announcing role of a dropdown. #5752 (and probably others)
• Normalize title prop (currently pulling from text OR title) Dropdown not showing tooltip on selected option #6449
• Typeahead/filtering Dropdown: Should narrow down/navigate to option on keyboard entry #6565 Filter items in Combobox when user is searching. #9682 A controlled Virtualized Combobox with filtering capability. #12052
• Support virtualized lists Combobox get stuck when trying to load more than 50000 items #7489
• Support get current selected item Dropdown: Add public interface to get selected value #7692
• Support keyboard selection Switch between items in Combo Box options using keyboard #9120, Dropdown: Should narrow down/navigate to option on keyboard entry #6565
• Convert to use hooks Combobox: Port to react hooks #9067
• Consistent focus and selection behavior Combo Box multi select text is not consistent with dropdown #8893
• ComboBox with multiple selected values are not read aloud ComboBox with multiple selected values are not read aloud #10718

Steps

• Themable (Component.base/Component.styles)
• Unit tests
• Visual tests
• Documentation and examples
• Keyboard Accessible
• High Constrast Support
• RTL Support
• Design Review
• API review
• Public Preview
• Ready for Publishing

[micahgodbolt]

Notes from 08/22 discussion

Work location and backwards compatibility

1. Work should start in experiments
2. Backwards compatibility is the goal. If deprecations are needed to align the two interfaces, we'll make that alignment now, deprecate the old props, and then release this via major release without the old props

Opportunities to improve the component

1. Leverage other components like Autofill and contextual menu
2. Look for abstractions and API consistency opportunities with pickers and new dropdown
3. Look at ways to abstract searching/displaying selected from the list below to enable custom dropdowns

Things that we should do

1. Avoid making component to become a huge, heavy, complicated beast
2. Incorporate createComponent for building this
3. Wait for text, buttons and other primitives to be ready so that they can be fully integrated

Expected Dev time

• Discovery : 2 weeks of dev or 1 month PM
• Initial Experiment: 1 month
• Ready for Publishing: 1 month

[betrue-final-final]

Hey, so we may want to reconsider this as a dropdown and combobox are two different things for ARIA. I had a short conversation with James Jackson about this.

[micahgodbolt]

We'd certainly want to capture proper aria values based on the type of UI used.

[cliffkoh]

@betrue-final-final that was one of the feedback I provided to @micahgodbolt which is that I think their accessibility treatment is very different. W.r.t. to merging the two, managing the accessibility for the many permutating states of Dropdown/ComboBox while keeping the component lightweight and the complexity manageable is likely going to be a significant challenge with this work.

[betrue-final-final]

James on our team has lots of knowledge here and can advise. He's not an engineer though!

[ecraig12345]

Assigning this to myself (and slightly repurposing) since David asked me to look into refactoring and/or merging ComboBox and Dropdown.

Other things to fix/consider as part of this work:

• ComboBox input field is empty while dropdown is visible #7558 ComboBox input field is empty while dropdown is visible
• ComboBox: Multi-select and other input issues #5929 Many issues around multi-select and freeform options
• Combobox: how can the user clear/reset a selection #5917 Discussion around how to clear/reset a selection and other issues
• Combobox doesn't autocomplete with non-english characters #5834 ComboBox doesn't auto-complete with non-English characters
• This PR comment thread for discussion around properly reading options, and possibly using Tooltip rather than title attribute to handle overflow
• ComboBox newly created freeform item is cleared with escape key #3061 Other issues around clearing freeform items (possibly fixed)
• ComboBox sends bad onChanged after backspacing all characters #3055 Allow submitting empty strings (fixed)

[micahgodbolt]

@ecraig12345 update the topmost point with TODOS reflecting those issues you mentioned

[kenotron]

Have another one where we mutate props.options when items are selected:
#9162

[popeadam]

We have a page that allows people to use 10 drop-down menus to filter a library of hundreds of items. People's filtering behaviour can become complex, and though we have a 'clear filters' button that allows all 10 drop-downs to be cleared, we regularly get feedback that they'd like to just clear one of the drop-down menus.

Once a user has selected an item/items, can we work on the ability to easily clear all those items from the dropdown? Example of how this might work below. once an item from a drop-down has been selected:

[ecraig12345]

@popeadam Can you please open a separate feature request for that?

[malvica]

Hello @ecraig12345 ,
Is the following issue still being worked on?
Dropdown & ComboBox options screen reader fix #7409
When using Dropdown I still see a default tooltip appearing for all the values.
in order to get rid of that I have to use an empty string for the title for each dropdown element:
const options: IDropdownOption[] = [
{ key: 'apple', text: 'Apple', title:'' },

Is there a way to disable this built-in tooltip? I am using office-fabric-ui-react version ^7.98.3

Thanks

[ecraig12345]

@malvica Can you please open a separate issue about that? It's not directly related to this refactoring issue.

[malvica]

Sure @ecraig12345 , done #13007.
Thanks

[ecraig12345]

Update: our roadmap and approach have changed a lot since this was first opened, so while we certainly still want to refactor these components, the approach may look significantly different than what was discussed above (also TBD whether it will happen as part of version 8 or not until the future converged version). At some point @joschect or another team member will need to go through the points called out here and determine which ones are still relevant and how we want to address them in a refactored version.

[jtbandes]

Hi, is there any update on the status of this? I'm specifically interested in filtering options as the user types.

[jtbandes]

In case anyone else is looking for a filtering solution, there are some pretty good examples over in #8606 that show how to use onPendingValueChanged to filter the set of options as the user types.

[smhigley]

Merging #16335 into this one. From that issue, two closed issues to consider for Dropdown convergence:

• Investigate using ContextualMenu for the menus in the dropdown and comboBox components #5206
• Clearable prop for either Dropdown or Combobox #8976

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.