Simple Combo
- Overview
- User Stories
- Test Scenarios
- Functionality
- ARIA support
- Assumptions and Limitations
- References
PwnJS
Boris Penkov
Stefan Ivanov
- Nikolay Alipiev | Date:
- Simeon Simeonov | Date:
- Konstantin Dinev | Date:
- Damyam Petev | Date:
| Version | User | Date | Notes |
|---|---|---|---|
| 0.1 | Boris Penkov | Oct 19, 2021 | Initial Draft |
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.
Must-have before we can consider the feature a sprint candidate
- The simple combo should allow the user to fill a form field by selecting a single value for it.
- The simple combo should allow typing in the input to filter the dropdown list.
- The simple combo should allow users to add custom values and select them.
- The simple combo should support keyboard navigation.
- The simple combo should support templating for its input and dropdown items.
- The simple combo should support the three display densities.
- The simple combo should be themeable.
- The simple combo should work with form validation rules.
Developer stories:
- Story 1: As a developer, I want the combo to filter the list of values according to what the user types in the input out of the box.
End-user stories:
-
Story 1: As an end-user, I want to type in the input, so that I can search for the value I want to select (i.e. no disabled input and no second input for search in the dropdown)
-
Story 2: As an end-user, I want to clear what I typed in the input so that I can revert the list of values in the dropdown to show all possible values.
-
Story 3: As an end-user, I want to clear my selection, so that the combo is in an empty/unselected state.
-
Story 4: As an end-user, I want to open the dropdown by clicking the dropdown icon, so that I can select a value.
-
Story 5: As an end-user, I want to open the dropdown by starting to type when the input is focused, so that I can select a value.
-
Story 6: As an end-user, I want to use the keyboard to navigate and select values, so that I can save time when filling forms.
-
Story 7: As an end-user, I want to open the dropdown by starting to type when the input is focused, so that I can select a value.
-
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.
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
3.2. Developer Experience
3.3. Globalization/Localization
Describe any special localization requirements such as the number of localizable strings, regional formats
3.4. Keyboard Navigation
| Keys | Description |
|---|---|
| Enter | Selects the focused value and closes the dropdown |
| Enter | While the user is typing in the input selects the first item in the list |
| Space | Selects the focused value in the dropdown without closing it |