Simple Combo

Simple Combo Specification

Contents

1. Overview
2. User Stories
3. Test Scenarios
4. Functionality
5. ARIA support
6. Assumptions and Limitations
7. References

Owned by

PwnJS

Boris Penkov

Stefan Ivanov

Requires approval from

• Nikolay Alipiev | Date:
• Simeon Simeonov | Date:

Signed off by

• Konstantin Dinev | Date:
• Damyam Petev | Date:

Revision History

Version	User	Date	Notes
0.1	Boris Penkov	Oct 19, 2021	Initial Draft

1. Overview

Objectives

The igx-simple-combo is a modification of the igx-combo component that allows single selection and has the appropriate UI and behavior for that. It inherits all the igx-combo API.

Check igxCombo spec for behavior and API that will be reused by the igx-simple-combo. This document will only point to the differences in the behavior, UI, and API between the igx-simple-combo and the igx-combo.

Acceptance criteria

Must-have before we can consider the feature a sprint candidate

1. The simple combo should allow the user to fill a form field by selecting a single value for it.
2. The simple combo should allow typing in the input to filter the dropdown list.
3. The simple combo should allow users to add custom values and select them.
4. The simple combo should support keyboard navigation.
5. The simple combo should support templating for its input and dropdown items.
6. The simple combo should support the three display densities.
7. The simple combo should be themeable.
8. The simple combo should work with form validation rules.

2. User Stories

Developer stories:

• Story 1: As a developer, I want to…, so that I can…

End-user stories:

• Story 1: As an end-user, I want to…, so that I can…

• only one, editable input. No read-only mode.

• typing in the input will filter the list.

• close button appears when there is any text in the input, not only when there is a selected item.

• list will be open not only on a click in the input or the drop-down button but also when we start typing.

• Enter will select the first matched item and will close the list, even though the item is not fully typed. No autosuggest will be implemented.

• Space will select an item but will leave the list opened.

• Clicking an item should select an item and close the list.

3. Functionality

The simple combo should look and feel exactly as the igx-combo so that when used together in a form they behave identically. The simple combo uses the value in its input field as the user types to search across all bound values and return matching ones, unless such are not existing when it is possible to add the value in the input as a selectable value in the list of items (when the property allows for this). The dropdown shows just a list of items that is scrollable when items exceed dropdown height and selection is singular i.e. if A is selected and I choose to select B, that also deselects A (there are no checkboxes in the list item template by default).

3.1. End-User Experience