Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-combobox): introduce nested grouping of items #8926

Open
wants to merge 23 commits into
base: main
Choose a base branch
from

Conversation

ndeshev
Copy link
Contributor

@ndeshev ndeshev commented May 9, 2024

Replace flat item structure with nested grouping.

Removes the ui5-cb-group-item component.

BREAKING CHANGE: The ui5-cb-group-item component is removed. Groups can now be created with the ui5-cb-item-group. Instead of using the old ui5-cb-group-item as separator in a flat structure:

<ui5-cb-group-item text="A"></ui5-cb-group-item>
<ui5-cb-item text="Algeria"></ui5-cb-item>
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="Australia"></ui5-cb-item>
<ui5-cb-item text="Austria"></ui5-cb-item>

The API supports nesting of ui5-cb-item components inside an ui5-cb-item-group:

<ui5-cb-item-group text="A">
	<ui5-cb-item text="Algeria"></ui5-cb-item>
	<ui5-cb-item text="Argentina"></ui5-cb-item>
	<ui5-cb-item text="Australia"></ui5-cb-item>
	<ui5-cb-item text="Austria"></ui5-cb-item>
</ui5-cb-item-group>

fix item selection bugs
implement partial navigation focus handling
@ndeshev ndeshev requested a review from ivoplashkov May 22, 2024 11:04
@ndeshev ndeshev changed the title feat(ui5-cb-group-item): introduce nested grouping (draft) feat(ui5-combobox): introduce nested grouping of items May 22, 2024
@ndeshev ndeshev marked this pull request as ready for review May 22, 2024 14:24
Copy link
Member

@ivoplashkov ivoplashkov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reproducible on main branch:

  • Navigate through the items using arrow down and then navigate through the value with arrow left/right and then navigate the items again => value gets partially selected instead of completely selected.
  • When you have items with grouping and you select an item with enter, then open picker and press Enter on the group, change event is fired (because the value get cleared, but not sure if this should happen as this cannot be achieved with mouse as the group item is not clickable).
  • Click on items with grouping sample and press Shift + tab, sample remains visually focused.

Bugs introduced with the change:

Items with grouping sample:

  • focus input without opening the picker and navigate through the values using ArrowDown => only items from the first group are being selected.
  • same interaction as above but instead of ArrowDown, navigate with Fn + ArrowDown until you hit “Madagascar”, upon ArrowUp => exception is thrown.
  • Open picker, navigate to any item and press Alt + Down => value gets cleared
  • Open picker, navigate down the items with ArrowDown => Upon reaching Australia picker gets scrolled to the bottom for no reason.
  • Open picker, press End button => picker is not scrolled to the last item.

packages/main/test/pages/ComboBox.html Outdated Show resolved Hide resolved
packages/main/src/ComboBoxItemGroup.ts Outdated Show resolved Hide resolved
packages/main/src/ComboBoxItemGroup.ts Show resolved Hide resolved
@ndeshev ndeshev requested a review from ivoplashkov May 25, 2024 03:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants