epam / epam/UUI

[PickerInput]: Add groups support

Open
#2,018 0 comments 0 reactions 0 assignees View on GitHub
improvement
Dominant language
TypeScript
Stars
247
Forks
78
Avg merge
14h 27m
Merged PRs (30d)
15

Description

## Now

Sometimes it is necessary to display some information not as an option, but as a name of groups of options. These groups should be reachable from keyboard, shouldn't be directly searchable (it can be visible, if search targets options, though).
Right now it can be achieved only by putting extra options and disabling checkboxes and folding for them + removing background-color and cursor change on hover, though when moving using arrows between options, this focus still stops on these "groups".

## To Do

Add support of groups for `PickerInput`.
Check example on this page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup#result
It would potentially cover the case from issue https://github.com/epam/UUI/issues/1627.

## Describe the solution you'd like (optional)

It can be determined by user whether an item is a group or an option via `getIsGroup` predicate on the component's and/or data source's level. Also, I think it will be useful to have `isGroup` flag for such rows/options.
On top of that, these groups should be easy to customize, because it may be necessary to render a counter of selected options in the group (or all groups) or something else.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.