refactor(aria/combobox): forward advanced combination keys in SimpleComboboxPattern#33196
refactor(aria/combobox): forward advanced combination keys in SimpleComboboxPattern#33196tjshiu merged 3 commits intoangular:mainfrom
Conversation
| .on('ArrowUp', e => this.keyboardEventRelay.set(e), {ignoreRepeat: false}) | ||
| .on('ArrowDown', e => this.keyboardEventRelay.set(e), {ignoreRepeat: false}) | ||
| .on(Modifier.Shift, 'ArrowUp', e => this.keyboardEventRelay.set(e), {ignoreRepeat: false}) | ||
| .on(Modifier.Shift, 'ArrowDown', e => this.keyboardEventRelay.set(e), {ignoreRepeat: false}) |
There was a problem hiding this comment.
I am a bit curious about how to use it in a real example, when multiple options are selected, how will the input box change. Do we want to ship along with an example in dev-app?
There was a problem hiding this comment.
Also it'd be nice to see if other Aria directives handle the key combo automatically. E.g. listbox, tree, grid, etc.
There was a problem hiding this comment.
Can you expand on what you mean for tree and grid ?
There was a problem hiding this comment.
Just want to see examples of how multi-selectable works for Tree and Grid when used in Combobox with the combo keys.
tjshiu
added
the
dev-app preview
|
Deployed dev-app for b675d7f to: https://ng-dev-previews-comp--pr-angular-components-33196-dev-6vg7up43.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
|
I added another component - I wasn't sure which ones you wanted to test but there are two multi-select options now. one previously with the select-only and now one with a dialog. That also sorta addresses this issue: #32659 |
|
Somehow I can't access the simple combobox and autocomplete pages in the preview dep-app. |
…omboboxPattern Implements keyboard event forwarding for multi-selection combinations within `SimpleComboboxPattern` to fulfill requirements in components#33101. - Always relays `Shift + ArrowUp` and `Shift + ArrowDown` range selection events for all combobox types (including editable inputs). - Relays text-selection combo keys (`Ctrl/Cmd + A`, `Shift + Home/End`) exclusively for non-editable (select-only) comboboxes to prevent interference with browser-native input field text manipulation per W3C APG specs. - Extends `simple-combobox.spec.ts` with multi-key verification tests.
Introduces a new example component `SimpleComboboxMultiselectDialogExample` demonstrating the definitive pattern for a multiselectable combobox using a nested dialog layout with an inner search filter input.
|
I think the link works now - sometimes it take a while. so far now I just have listbox examples. But would it be okay to add the tree ones and grid ones in a following one ? |
|
Yea those are definitely not the blockers. The changes don't affect the current usage so we are good. |
|
Examples look good! The select all in Combobox select is really useful IMO. However I do find the shift + up/down select a bit wonky. Here's the step you can test it use the Combobox select as an example
Expected: "Important", "Starred", "Personal", and "To Do" are selected, and "Work" remain unselected. Actual: "Important", "Starred", "Work", and "Personal" are selected. The selection anchor seems to stay on the "Important" when the arrow keys supposed to move the selection anchor along with the active item. |
|
Nice catch - updated it so that it works for this case now - needed to reset the anchor point |
|
Also this will be good for this issue: #33101 |
|
I see. Interesting because it works with the standalone Listbox multi-select example. |
Nice! Worth mention that we can't support |
tjshiu
added
action: merge
|
This PR was merged into the repository. The changes were merged into the following branches:
|
2 participants
Implements keyboard event forwarding for multi-selection combinations within
SimpleComboboxPatternto fulfill requirements in components#33101.Shift + ArrowUpandShift + ArrowDownrange selection events for all combobox types (including editable inputs).Ctrl/Cmd + A,Shift + Home/End) exclusively for non-editable (select-only) comboboxes to prevent interference with browser-native input field text manipulation per W3C APG specs.