Combobox component (new)

[reddolan]

Description

• a Select component that allows for typing as well as scrolling through options
• similar to autocomplete or combobox

Use cases under consideration

• type into field and filter down to options matching query
• click something to show the options available
• scroll through list and select an option
• multi-select
• option grouping (or categories)
• accessible navigation, option selection and option deletion
• system status for slow responding option list
• highlight value matches in options

Documentation

Basic

Default view

• will look like a standard Select
• caret will be grey and have an circle around it to distinguish it from a standard Select
• the input field will show the standard input focus style (blue underline) while being interacted with

Active view

• clicking the caret will show the Options dropdown
• with the dropdown showing, the arrow keys can navigate up or down through options
• hitting Enter will select the option and display it in the input field
• show up to 10 options at a time
• if more than 10 options exist, user will be able to scroll down through them
• hover or highlight while scrolling will be the hover grey (#EEE)

Selections

• selected option will be the row selection blue (#D9E4EA)

Typing

• tabbing into the field will show the cursor in the input field
• options are displayed after 1 character has been typed
• query values are highlighted bold within each matching option
• pressing the down arrow key shows the dropdown
• user can tab to the caret and activate the dropdown
• tabbing out, clicking outside of, or hitting Escape will close the dropdown

Searching message

• if the options come back quickly (< 100ms), show the Options dropdown
• if the options load slowly (> 100ms), show the Searching dropdown
• Searching message will use the Select's label value

Multiselect

• includes all Basic interactions
• user can select more than one option by clicking on it or hitting Enter
• holding Shift and selecting two separate options will select all options in between them
• hitting Enter or clicking outside of the dropdown will make the option visible in the input field as a Label
• the Label will have an “X” in it for easy removal
• selecting the Label and deleting it will remove it from the selected options

• Labels will fill the space available in the inut field and over flow will wrap vertically

Option Groups

• options can be displayed on groups with a title

Custom Option Format

• option can be formatted in a custom way
• can be used to include additional useful data such as images or other data

References

• Select 2
• ComboBox, Kendo UI
• MultiSelect, Kendo UI
• Autocomplete Combobox, jQuery
• Drop-down Lists & Combo Boxes, Microsoft
• Combo Box, Microsoft
• Combobox, dfmcfee
• Autocomplete, Angular JS
• Redesigning the Country Selector, Smashing Magazine

[reddolan]

Original request - #90

[jaffoneh]

Closing as duplicate for now.

[youdz]

Regarding accessibility, please make sure to follow these:
https://www.w3.org/TR/wai-aria/#combobox
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role

[mattmutt]

Are configurations such as characters typed until query fired and maximum number of elements to be shown in a dropdown generally exposed or are they going to be constant? Sometimes the rule should be flexible: only after typing N characters should the options be calculated ( because 1 character is not useful against very large datasets)

Will this widget take a configuration object, or will be manually assigning attributes in markup on the component tag?

In the case the select widget in contained within a restricted container that clips, will there be an option to define what node the popup portion of the select list actually binds too? On this subject will the select list be intelligent to cope with common edge cases where visual placement of the select list below the trigger input box would result in truncation? The layout engine should appropriately cause the positioning of the select list to render above the trigger point.

[jaffoneh]

Are configurations such as characters typed until query fired and maximum number of elements to be shown in a dropdown generally exposed or are they going to be constant? Sometimes the rule should be flexible: only after typing N characters should the options be calculated ( because 1 character is not useful against very large datasets)

@reddolan can provide details but from our discussions, it should be configurable (for exactly the use case you mentioned).

Will this widget take a configuration object, or will be manually assigning attributes in markup on the component tag?

We haven't discussed the technical spec for it deeply but that's a good question. cc @youdz

In the case the select widget in contained within a restricted container that clips, will there be an option to define what node the popup portion of the select list actually binds too?

Could you provide more info here? I am not sure I fully understand the use case.

On this subject will the select list be intelligent to cope with common edge cases where visual placement of the select list below the trigger input box would result in truncation? The layout engine should appropriately cause the positioning of the select list to render above the trigger point.

In this one as well, @reddolan would be able to provide more details (and @youdz on the technical side once the spec is ready on that side) but that's a good question and my assumption is that it would either cope with common edge cases or provide alternative experiences there.

[youdz]

Will this widget take a configuration object, or will be manually assigning attributes in markup on the component tag?

As a general rule, Clarity components try to stay away from large configuration objects. So probably attributes in markup. There shouldn't be that many, though, I don't foresee a crazy amount of option that won't be solved by projecting custom content.

In the case the select widget in contained within a restricted container that clips, will there be an option to define what node the popup portion of the select list actually binds too? On this subject will the select list be intelligent to cope with common edge cases where visual placement of the select list below the trigger input box would result in truncation? The layout engine should appropriately cause the positioning of the select list to render above the trigger point.

On this one, @adityarb88 had the issues with dropdowns and tooltips a bunch of times already. I don't believe we have a good universal solution at the moment, we were still investigating last time I checked.

[vkpavan26]

We have the following usecases with Select box:
1.In few configurations inventory might not be synced with the latest information, user should be able to type in the Select box in such cases.
2.In another usecase all the eligible IPs to form a cluster are not available in that use user should be allowed to type in the IP.

In short we need a capability for the user to type in the Select box and would not require an autoComplete in such cases.

[ajinkyac]

We would also like to know if following things are possible:
1.) Fixed width to the select box
2.) In case of fixed widths, the options/selected text could be truncated with ellipsis in case of overflow.

[reddolan]

@vkpavan26 are you talking about when a user types in a value that doesn't exist in the available options?

[reddolan]

@ajinkyac thank you for sharing these use cases

1. this should be doable with CSS
2. It's a valid use case and one we need to look into how we will handle it: option values exceeding the dropdown area width

[c0desolut1ons]

Does anybody know release date for issue #248?
We need to move on with the development and if this problem will be solved in the near future we would like to use Clarity.
Our technology stack:

• Meteor
• Angular 2
• UI: Clarity / Covalent / Semantic ... depends on your answer :-)
  Thx.

[jaffoneh]

@c0desolut1ons do you have some more information on the application you're planning to build? We don't currently have a timeline for select 2.0 considering the other priorities we're looking at but I'd love to discuss the application you're building and how we can collaborate on delivering this if possible.

[gnomeontherun]

All I can say is it is in progress and we hope the timeline is soon. We've got a Datalist component that should land for v3, so that can also help for many use cases.

[dannyr-git]

All I can say is it is in progress and we hope the timeline is soon. We've got a Datalist component that should land for v3, so that can also help for many use cases.

Oh wow, so we're not making v3 either?

3 Year Anniversary of this component!

[webia1]

Understanding question: Autocomplete is not ready yet?

[mathisscott]

@webia1
For a simple autocomplete form field, checkout the datalist component in 3.0

For more complex autocomplete fields, @Jinnie and @hippee-lee can provide an update

[Jinnie]

The combobox is under active development. There had been some accessibility related technical complications, but they are overall resolved now and we're back to the normal planned development process.

[jmls]

oooh, any idea if this will make it into v3 ? I need this so badly ...

[HarperHampton]

ETA on this would be exceedingly helpful. We are preparing a new project and I would prefer to use Clarity over Angular Material. Can make adjustments to code around this if I know it's coming.

[mathisscott]

@HarperHampton and @jmls

There is a WIP branch in review right now. I don't think this will be in 3.0 but I believe we are planning to have it ready for 3.1 – which should land shortly after 3.0.

I think time-wise that puts this on the 4-6 weeks away timeframe. Maybe sooner. Maybe later. Depends...

[Jinnie]

@colinreedmiller We'd need a dark theme design spec for this component, thanks!

[colinreedmiller]

@Jinnie - left a note in the Figma file - all dark theme colors specified there. also: changed the dismiss X to 5px - let me know if you have any thoughts, questions.

[d-m-s]

is the development of this component further pursued or will this be replaced by datalist?
https://clarity.design/documentation/datalist

[gnomeontherun]

@d-m-s The datalist is a lightweight HTML element that we could easily support. The combobox is still being built to work for more complex situations, so you'll have both options.

[hippee-lee]

@d-m-s combobox has an open pull request thats currently under review if you want to take a look at it while it gets polished: #4286

[shankar1318]

@hippee-lee @gnomeontherun when can we expect combobox release? I am waiting for the multi select functionality.

[hippee-lee]

Hi @shankar1318 - please follow the PR #4286. It is almost through the review process. Once that gets merged and is in master it will go into Clarity v4. We are testing with Angular 10.0.0-rc.0 this week to prepare for Angular v10 coming soon.

[adumesny]

good to see such a control coming out. Is there a plan for a Search widget that would be similar ? could maybe even restyle this one as I've been thinking of a search (type anything) + filter combo like this:

[gnomeontherun]

@adumesny We don't have any design or explorations for something like this, but I believe the combobox can provide you most of what you really need here. I don't really understand the mechanics or use case of this control at this moment.

[adumesny]

@gnomeontherun even if you ignore my custom design (search + filter) a simple search field with type ahead suggestions like this new comboBox (but with highlighting of the matching pattern) would be great. Every product seem to re-create their search...

[sisohs]

Hi @shankar1318 - please follow the PR #4286. It is almost through the review process. Once that gets merged and is in master it will go into Clarity v4. We are testing with Angular 10.0.0-rc.0 this week to prepare for Angular v10 coming soon.

@hippee-lee will this be available in the previous versions of Clarity?

[Jinnie]

The combobox is finally officially in our repo, waiting for the next release.
Please add all related problems, suggestions for improvements, direct contributions with code, design, documentation, etc, in separate issues or pull requests, so they can get focused attention and prioritization.
Thank you!

[mathi123]

@Jinnie Any idea when this will end up in the v4.next package? I have been eagerly waiting for this ;)

[gnomeontherun]

Its available in https://www.npmjs.com/package/@clr/angular/v/4.0.0-rc.0