Combo (Web Components 7.5): remote data, select all, group selection and confirm mode #1000

Task type

• New topic / component documentation
• Update existing topic (new release, API change, new feature)
• Add missing platform variant (Angular / React / WebComponents / Blazor)
• Improve existing content (clarity, examples, structure)
• Add or update code samples
• Other

Platform(s)

• Angular
• React
• WebComponents
• Blazor
• All platforms

Description

Ignite UI for Web Components 7.5 adds remote data, select all, group selection and a confirm mode to igc-combo, and changes some of its behavior. All of it is in IgniteUI/igniteui-webcomponents#2545, which is still open, so check the final API against its CHANGELOG before writing.

Topics: docs/xplat/src/content/en/components/inputs/combo/ (overview.mdx, features.mdx, templates.mdx). React (IgrCombo) and Blazor (IgbCombo) wrap this component, so these shared topics cover them too once their packages include it. Put content that is only for Web Components, such as bindComboDataSource(), in a PlatformBlock.

• Remote data ([Feature Request] Combo: remote data binding (search event, load on scroll, total item count) igniteui-webcomponents#2519). There is no xplat topic for remote binding yet. The Angular topic docs/angular/src/content/en/components/combo-remote.mdx can serve as a model. Cover:
  • filteringOptions.mode = 'remote': the combo no longer filters the options itself. igcSearchInput reports the search text in detail.searchText, so the app searches on the server and sets data to the results.
  • igcDataRequest: asks for more items when the user scrolls near the end of data (append count items at startIndex).
  • totalItemCount, which shows a skeleton placeholder for each item not loaded yet so the scrollbar shows the full list, and loading, which shows a spinner in place of the toggle icon. The loading slot replaces the spinner.
  • bindComboDataSource() from igniteui-webcomponents/extras, which implements the flow from a load function that returns one page (Web Components only).
• Select all ([Feature Request] Combo: "select all" item and partly-selected state for the list and the groups igniteui-webcomponents#2535). selectAllItems() and deselectAllItems() act on the items the list shows after the filter, or on all of data with ignoreFilter. showSelectAll adds a "Select all" option at the top of the list, with an indeterminate checkbox while only some items are selected. The "Select/deselect all items" section of overview.mdx shows select() and deselect() with no arguments, which act on all items, so explain how the two differ.
• Group selection ([Feature Request] Combo: "select all" item and partly-selected state for the list and the groups igniteui-webcomponents#2535). groupSelection, with groupKey set, turns each group header into an option that selects the shown items of its group. Add it to the Grouping section of features.mdx.
• Confirm mode ([Feature Request] Combo: stage a multi-selection and commit it on Apply igniteui-webcomponents#2533). With selectionCommit="confirm", the user's changes stay pending while the list is open (pendingValue, cancelable igcPendingChange). Enter or the built-in Apply button commits them with one igcChange of the new commit type, and Cancel or any other close drops them. Content in the footer slot replaces the Apply and Cancel buttons and can call commitSelection() and cancelSelection(). Cover that in the Footer Slot section of templates.mdx.
• Close trigger ([Feature Request] Combo: stage a multi-selection and commit it on Apply igniteui-webcomponents#2533). igcClosing and igcClosed now have a detail.trigger that says what closed the list (enter, escape, tab, outside-click, apply, cancel and others). They are typed CustomEvent<IgcComboClosingEventArgs> instead of CustomEvent<void>.
• Keyboard navigation ([Bug]: Combo - keyboard users cannot reach focusable content in the header and footer slots igniteui-webcomponents#2529). The Keyboard Navigation section of overview.mdx says Tab closes the list. Now Tab and Shift+Tab move through the focusable content of the header, empty and footer slots while the list is open. Also add Enter in confirm mode.
• Behavior changes. A new data now keeps the selection; set value to [] to clear it. Check that the cascading combos samples (docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx) still clear the dependent combo. The igcInput event of the search input no longer leaves the combo; use igcSearchInput instead.
• Styling. Add the new parts to the parts table in the Styling section of overview.mdx: select-all, indeterminate, actions, cancel-button, apply-button, loading and placeholder.

Acceptance criteria

• Remote data has its own topic or section with a sample that includes totalItemCount and loading.
• Select all, group selection and confirm mode each have a section with a sample.
• The Keyboard Navigation section matches the new Tab behavior.
• The API References sections list the new properties, methods, events and types.

Related resources

• Issues: [Feature Request] Combo: remote data binding (search event, load on scroll, total item count) igniteui-webcomponents#2519, [Feature Request] Combo: stage a multi-selection and commit it on Apply igniteui-webcomponents#2533, [Feature Request] Combo: "select all" item and partly-selected state for the list and the groups igniteui-webcomponents#2535, [Bug]: Combo - keyboard users cannot reach focusable content in the header and footer slots igniteui-webcomponents#2529, [Bug]: Combo - the search input's igcChange escapes the combo, with the search text as detail igniteui-webcomponents#2530
• PR: feat(combo): add remote data, select all, group selection and confirm mode igniteui-webcomponents#2545. Its CHANGELOG.md entries under [Unreleased] list every change.