IgxSelect Specification

Revision History

Version	User	Date	Notes
0.1	Milko Venkov	Dec 12, 2018	Initial Draft

1. Overview

Objectives

The igxSelect provides an input with drop down allowing selection of a single item.

2. User Stories

As an end user, I want to:

have an input that allows me to select a single item from a dropdown list
be able to easily and quickly navigate through the list of items
be able to select and confirm one option from the dropdown list by using my keyboard
be able to close the dropdown list without selecting anything
be able to close the dropdown list without selecting anything by using my keyboard
see the currently selected item when opening the dropdown list

Developer Stories

As a developer, I want to:

get/set the value that is selected
bind the control to an array of primitive values (string, number, etc.)
bind the control to an array of objects and:
- be able to specify which property should be used for the text value
- be able to specify which property should be used for the value
bind the control to a remote set of data
specify a template for the way data should be visualized inside the dropdown
be notified, when the value of the input has changed
be notified, when the dropdown of the input is shown
be notified, when selection has changed

3. Test Scenarios

Automation

Input text box is read-only and user is not able to type in
Dropdown menu popup gets displayed when
- input is pressed
- dropdown button is pressed
- down arrow + ALT keys are pressed
- enter key is pressed when select is active
- space key is pressed when select is active
When open if there is selected item the text of the selected item should be place exactly above the text of the input
When open if there is selected item but there is no enough screen space to place selected item over the input's text dropdown list should be shown above the input
When opened the dropdown popup can be closed by pressing
- the dropdown button
- up arrow + ALT keys
- enter key is pressed
- space key is pressed
- escape key is pressed
The dropdown can be closed without selecting anything
onOpening/onClosing event is fired on opening/closing the dropdown list
onOpened/onClosed event is fired after the dropdown list has been opened/closed
Pressing Home key scrolls up to the first non-disabled item of the dropdown list
Pressing End key scrolls down to the last non-disabled item of the dropdown list
Key navigation through disabled items should skip the disabled items
Vertical scrollbar is visible only when the items does not fit inside the dropdown container
Dropdown list appearance can be customized by applying templates
When using key navigation to move up and down the items list the current item is focused and movement starts from the last selected item if any or from the first item in the list if no list item is selected
onSelectionChange event is triggered when an item is being selected
Selected item is highlighted in the dropdown list
IgxSelect can be bound to an array of primitive data, array of objects or remote service
IgxSelect applies all appropriate classes on initialization
The items can be disabled/enabled at runtime
The dropdown should persist selection through scrolling
Disabled items cannot be focused
Disabled items cannot be selected