UNPKG

vue-taggable-select

Version:

multiple taggable select autocomplete dropdown for vue

github.com/robrogers3/vue-taggable-select

robrogers3/vue-taggable-select

78 lines (52 loc) • 2.27 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
# Test Rail ## Display and Searching ### The supplied options show correctly Given you have supplied options. When you expect the options to display. They display correctly. ### Matching options display when entering search text. Given you have entered corresponding search text only matching options show as available. ### Changing an Option Given you have selected an option, When you focus on the selected option, Then the search input is focused with the text of the previous option as the search text ## Selecting Options and Deselecting Options ### You can Select an Option Given there are matching options, when you click on an option, or press enter the corresponding option will selected. ### A Selected Option is available to the Parent Component or Instance When you have selected an option, Then the selected option is set in the parent. ### The selected Option can be removed Given you have selected an options. When you click the 'deselect' icon, the selected option is removed. ### Deselected Options are reflected in the Parent component or Instance Given you have deselected an option, The selected option is deleted in the parent component or instance. ## KeyBoard Events ### You can navigate matching options by clicking the up or down arrow keys. When matching options are displayed, You can move to an option for selection by clicking the up or down arrows. ### You can select an option by entering 'Enter' key while navigationg Options Given there are matching options, And you are either navigating options, Upon hitting the Enter key The corresponding option is selected. ### You can select the first matching option by clicking Enter key Given there are matching options, When you click enter without navigating Then the first matching option is selected. ### You can dismiss the options by clicking the Tab or Escape keys. Given you are focused on the search input, when you click the Tab or Escape keys, Then the options are dismissed and you move away from the seach input. ## CSS Classes, HTML Attributes ### You can overide the look of the component by supplying Classes ### You can provide these HTML attributes * Required * Tab Index * The element Id * The element name * Default value for the search input