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.

[c0desolut1ons]

@jaffoneh Practically we are planning to develop two applications:

1. Customer Service App (Meteor, now Angular 4 :-), Clarity UI)
2. Termin3 Appointment Scheduling web app for clients (we already have the Android app and now we go a step further) - https://goo.gl/GHnCQd Thx Jaff.

[youdz]

An external contributor is going to start working on a partial version of this component. I don’t want to call it an "MVP", because everyone considers different features to be absolutely necessary. Anyway, he’ll work on select with typing capabilities.

We would like this component to be usable as a simple select in the default case. It will look like this:

<clr-select [(ngModel)]="selected">
    <input type="text" clrSelectInput />

    <clr-option [clrValue]="first">{{first.name}}</clr-option>
    <clr-option [clrValue]="second">{{second.name}}</clr-option>
</clr-select>

The model will be the actual first or second objects, not just their names.

We could potentially make the <input> optional, but let's have it explicitly for now.

In the example above, the options will be in the DOM at all times, just like a native select. But we recommend using the *clrIfOpen directive to only instantiate options when needed:

<clr-select [(ngModel)]="selected">
    <input type="text" clrSelectInput />

    <ng-container *clrIfOpen>
        <clr-option [clrValue]="first">{{first.name}}</clr-option>
        <clr-option [clrValue]="second">{{second.name}}</clr-option>
    </ng-container>
</clr-select>

Obviously, you will be able to generate options dynamically:

<clr-option *ngFor="let option of options" [clrValue]="option">{{option.name}}</clr-option>

Having the options simply declared in the HTML allows you to display anything you want for them, instead of just a string:

<clr-option *ngFor="let movie of movies" [clrValue]="movie">
    <img class="poster" [src]="movie.poster" />
    <span class="title">{{movie.title}}</span> - <span class="year">{{movie.year}}</span>
</clr-option>

Finally, you might not want to display the same DOM in the dropdown of the select and inside the input. Especially if your dropdown contains images or long descriptions. In this case, you'll be able to display a different label for the option when it is rendered in the input itself:

<clr-select>
    <input type="text" clrSelectInput />

    <ng-container *clrOptionSelected="let movie">{{movie.title}}</ng-container>

    <clr-option *ngFor="let movie of movies" [clrValue]="movie">
        <img class="poster" [src]="movie.poster" />
        <span class="title">{{movie.title}}</span> - <span class="year">{{movie.year}}</span>
    </clr-option>
</clr-select>

The point of this API is also to anticipate on the rest of the features presented, so that they can be added without breaking changes. For instance, a future advanced case might look like this:

<clr-select [(ngModel)]="selectedVideos" [clrMultiple]="true">
    <input type="text" clrSelectInput />

    <ng-container *clrOptionSelected="let video">
        {{video.title}}
        <ng-container *ngIf="video.tv">(TV)</ng-container>
    </ng-container>

    <ng-container *clrIfOpen>
        <clr-option-group>
            <clr-option-title>Movies</clr-option-title>
            <clr-option *ngFor="let movie of movies" [clrValue]="movie">
                <img class="poster" [src]="movie.poster" />
                <span class="title">{{movie.title}}</span> - <span class="year">{{movie.year}}</span>
            </clr-option>
        </clr-option-group>
        <clr-option-group>
            <clr-option-title>TV Shows</clr-option-title>
            <clr-option *ngFor="let show of shows" [clrValue]="show">
                <span class="title">{{show.title}}</span> ({{show.nbEpisodes}} episodes)
            </clr-option>
        </clr-option-group>
    </ng-container>
</clr-select>

[marvinosswald]

Hate to annoy everyone, but is here a release date foreseeable ?

[mathisscott]

@marvinosswald Not annoying at all. Thanks for checking in!

We haven't heard from the aforementioned external contributor, so I'm not sure what's being done on that end.

On our end, this is in the top third of our current priorities but is currently not scheduled (meaning it isn't assigned to anyone on our team yet). Given the current priorities on our plate, I don't know if we would be able to start working on this for at least 3 weeks. Maybe longer if our priorities shift.

But it's in line to get worked on. Near the front at this point in time.

[reddolan]

Additional features from #980 - ability to add new options that aren't part of the option list, done while typing

• ability to have custom select option: could be used to add a new option or some other action/selection
• read-only
• validation design

[reddolan]

Additional feature request

• dividers: to create visual sections, header, or footer

[marvinosswald]

Additional feature request:

• Option Groups should be nestable

It is indeed a visual hierarchy and is meant to be not restricted to one level as it is with the <optgroup> Tag.

Which means we should be able to have more than one level depth in terms of grouping options, it might be limited visually by the selects width.

[reddolan]

@marvinosswald can you give us a little more detail on your request about nestable Option Groups? Are you talking about building a visual hierarchy? Do you have an example that you can point to?

[jmcmichael]

Any update on the status of this component? Could you maybe add it to the Component Status page?

[mathisscott]

@jmcmichael

We had an external contributor working on it who got pretty far with it. But then it appears he stopped working on it or maybe something else came up.

It is currently not one of our top three priorities. But we do plan to work on it in the future.

We're also working on a better way to communicate both our current priorities (and progress on those priorities) as well as our near-future priorities.

[marvinosswald]

@jmcmichael @mathisscott it‘s still in my todo just priorities in my project shifted a little bit which pushed this component a little bit back in our timeline

[jmcmichael]

I was just looking over Clarity's Sketch templates, and noticed the 'Search' component, as well as in the component Status page. Are we discussing the 'Search' component in this issue, or is this about a different component?

[mathisscott]

@jmcmichael They’re related but different

[tarundhillon]

Wondering if work on this has been planned now ? Thanks

[mathisscott]

@tarundhillon An external contributor has been working on this item. You can see the pull request here. Please subscribe to that to track status.

[geek-at-heart]

@mathisscott -- the linked PR was just closed. Any updates on whether we'll get this behavior pulled into Clarity?

[mathisscott]

@geek-at-heart The PR still needed some work and had gotten stale over the 0.10 -> 0.11 shift. Someone on the Clarity team is going to take it over and start working on Search 2.0 when they are freed up. We're still figuring out when that will be. Hopefully not too long.

If you stay subscribed to this issue, you should see activity on it when it starts up.

[kumar-tadepalli]

Waiting for this component..

[franckstifler]

Add a auto active first option as in the case of autocomplete of material. Thanks. Waiting for this component to, it's crucial to our business logic.

[lgrigorova]

@ajinkyac I would suggest as a workaround for the long values in options to use substring to truncate teh value if too long, add ellipsis and use this value in the option. You could add the full value as title of option and thus have tooltip.

Regards,

Ledda

[gerald-gonzales]

Hoping that this component would be available soon.

[reddolan]

@gerald-gonzales this is currently under development

[szechyjs]

Additional feature request...

• Display as a static list instead of a dropdown select box; similar to PrimeNG Listbox.

[gperdomor]

Any ETA of this feature?

[adibwoy]

@gperdomor: We plan to start working on implementing this soon. We are in the process of figuring out what features should the first version of Select 2.0 have. Will post more updates here when I have them!

[armpp]

I'm waiting How long will it be?

[gperdomor]

@adityarb88 thanks for the response... I need this feature so I'm happy to see your first commit :D. I can't adopt clarity without this :(

[luis-cortina]

It would be great to also have a way to clear the single selection (setting the selected object to null) right from the select, much like ng-select. Like this image...

Thanks for the awesome work.

[kumar-tadepalli]

Does this feature will be available in 0.11.x or not?

[mathisscott]

@shravansofts This new component will not be in 0.11.

[yuezhizizhang]

Any progress on this feature?

[Shijir]

@yuezhizizhang The implementation of this component has been started and ongoing.

[RNACode]

+1

[jayapalapm]

Any idea when will this feature available?

[mathisscott]

Hi @jayapalapm

Right now, we have moved Select 2 back into our prioritization queue. We will be discussing it in our next quarterly planning (probably in the next few weeks) and determine if it is something that we can pick up between August-February or if it something that will need to be pushed out past next February.

Voices from the community (including thumbsup and +1s) do factor into those discussions.

[jmcmichael]

+1

You may want to create a separate comment for voting as thumbs up/down on the above comment is ambiguous - 'down' could mean 'waaah why is this taking two years?!' or 'I don't need this feature'

As an emergency solution, perhaps it would make sense to temporarily lean on another ng select2 component, by skinning it to fit in w/ ClarityUI's theme. Honestly I now need to do this myself as I have put off as long as I can developing a field control for an app I'm working on, and am pulling a Tom Sawyer fence-painting trick to maybe get y'all to do it instead. ;) This is the best select component that I could find w/ a permissive license, so I'm going to start with it: https://github.com/ng-select/ng-select

[luis-cortina]

@jmcmichael If you're doing this in github or somewhere open, please send me the details, I need this asap and I would want to collaborate.

[mvcoding]

This is the only thing missing that prevents me from switching to Clarity, so i hope it won't be delayed to next year.