Skip to content

Commit 3d8cb31

Browse files
cameronpettitcameronpettit
authored
Merge pull request #37 from digitalspace/selectOnEnterPatches
Patching selectOnEnter behaviour
2 parents c38966f + 517a290 commit 3d8cb31

4 files changed

Lines changed: 149 additions & 41 deletions

File tree

‎projects/ngds-forms/src/lib/components/input-types/ngds-dropdown.component.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,13 @@ export class NgdsDropdown extends NgdsInput implements AfterViewInit {
357357
}
358358

359359
getFirstAvailableOption() {
360+
if (this.refinedListItems && this.refinedListItems.length > 0 && this.refinedListItems.length < this.displayedSelectionListItems.length) {
361+
for (const item of this.refinedListItems) {
362+
if (!item?.disabled) {
363+
return item?.value || item || null;
364+
}
365+
}
366+
} else
360367
if (this.displayedSelectionListItems && this.displayedSelectionListItems.length > 0) {
361368
for (const item of this.displayedSelectionListItems) {
362369
if (!item?.disabled) {

‎projects/ngds-forms/src/lib/components/input-types/picklist-input/picklist-input.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,6 @@
117117
</li>
118118
<li
119119
*ngFor="let option of displayedSelectionListItems;"
120-
type="menuitem"
121120
class="option-item"
122121
href="#"
123122
>
@@ -128,12 +127,14 @@
128127
>
129128
<ng-container
130129
[ngTemplateOutlet]="selectionListTemplate"
130+
type="menuitem"
131131
[ngTemplateOutletContext]="{data: option}"
132132
></ng-container>
133133
</button>
134134
<!-- Display current menu item as string -->
135135
<button
136136
*ngIf="!showTemplate()"
137+
type="menuitem"
137138
class="dropdown-item"
138139
(click)="onValueChange(option, true)"
139140
value="{{ option?.value || option }}"

‎src/app/forms/multiselects/multiselects.component.html‎

Lines changed: 138 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,184 @@
11
<h2>Multiselects</h2>
2-
<section #section id="basicPicklistMulti" class="mb-5 mt-3">
2+
<section
3+
#section
4+
id="basicPicklistMulti"
5+
class="mb-5 mt-3"
6+
>
37
<h3>Basic multiselect picklist</h3>
48
<p>
59
Provide the list of selection options as an array in <code>[selectionListItems]</code>.
610
</p>
711
<demonstrator
8-
[control]="form?.controls?.['basicPicklistMulti']" [htmlFile]="snippets?.basicPicklistMulti?.html" [tsFile]="snippets?.basicPicklistMulti?.ts">
9-
<ngds-picklist-input [control]="form?.controls?.['basicPicklistMulti']" [selectionListItems]="displayProvinceList" [multiselect]="true" [resetButton]="true" [selectAllButton]="true"
10-
[placeholder]="'Select multiple'">
12+
[control]="form?.controls?.['basicPicklistMulti']"
13+
[htmlFile]="snippets?.basicPicklistMulti?.html"
14+
[tsFile]="snippets?.basicPicklistMulti?.ts"
15+
>
16+
<ngds-picklist-input
17+
[control]="form?.controls?.['basicPicklistMulti']"
18+
[selectionListItems]="displayProvinceList"
19+
[multiselect]="true"
20+
[resetButton]="true"
21+
[selectAllButton]="true"
22+
[placeholder]="'Select multiple'"
23+
>
1124
</ngds-picklist-input>
1225
</demonstrator>
1326
</section>
1427

15-
<section #section id="programmaticPicklistMulti" class="mb-5 mt-3">
28+
<section
29+
#section
30+
id="programmaticPicklistMulti"
31+
class="mb-5 mt-3"
32+
>
1633
<h3>Programmatically set picklist multiselect</h3>
1734
<p>The example below selects only territories when you click the button.</p>
1835
<demonstrator
19-
[control]="form?.controls?.['programmaticPicklistMulti']" [htmlFile]="snippets?.programmaticPicklistMulti?.html" [tsFile]="snippets?.programmaticPicklistMulti?.ts">
20-
<button class="btn btn-primary my-2" (click)="programSetPicklist()">Set value</button>
21-
<ngds-picklist-input [control]="form?.controls?.['programmaticPicklistMulti']" [selectionListItems]="displayProvinceList" [multiselect]="true" [resetButton]="true" [selectAllButton]="true"
22-
[placeholder]="'Select multiple'">
36+
[control]="form?.controls?.['programmaticPicklistMulti']"
37+
[htmlFile]="snippets?.programmaticPicklistMulti?.html"
38+
[tsFile]="snippets?.programmaticPicklistMulti?.ts"
39+
>
40+
<button
41+
class="btn btn-primary my-2"
42+
(click)="programSetPicklist()"
43+
>Set value</button>
44+
<ngds-picklist-input
45+
[control]="form?.controls?.['programmaticPicklistMulti']"
46+
[selectionListItems]="displayProvinceList"
47+
[multiselect]="true"
48+
[resetButton]="true"
49+
[selectAllButton]="true"
50+
[placeholder]="'Select multiple'"
51+
>
2352
</ngds-picklist-input>
2453
</demonstrator>
2554
</section>
2655

27-
<section #section id="displayOptionsPicklistMulti" class="mb-5 mt-3">
56+
<section
57+
#section
58+
id="displayOptionsPicklistMulti"
59+
class="mb-5 mt-3"
60+
>
2861
<h3>Hide or disable selected items</h3>
2962
<p>Use <code>[displaySelectionItems]</code> to hide or disable options that have already been selected.</p>
3063
<demonstrator
31-
[control]="form?.controls?.['displayOptionsPicklistMulti']" [htmlFile]="snippets?.displayOptionsPicklistMulti?.html" [tsFile]="snippets?.displayOptionsPicklistMulti?.ts">
32-
<ngds-picklist-input [control]="form?.controls?.['displayOptionsPicklistMulti']" [selectionListItems]="displayProvinceList" [multiselect]="true" [resetButton]="true" [selectAllButton]="true"
33-
[displaySelectionItems]="'false'"
34-
[label]="'Hide selected options'"
35-
[placeholder]="'Select multiple'">
64+
[control]="form?.controls?.['displayOptionsPicklistMulti']"
65+
[htmlFile]="snippets?.displayOptionsPicklistMulti?.html"
66+
[tsFile]="snippets?.displayOptionsPicklistMulti?.ts"
67+
>
68+
<ngds-picklist-input
69+
[control]="form?.controls?.['displayOptionsPicklistMulti']"
70+
[selectionListItems]="displayProvinceList"
71+
[multiselect]="true"
72+
[resetButton]="true"
73+
[selectAllButton]="true"
74+
[displaySelectionItems]="'false'"
75+
[label]="'Hide selected options'"
76+
[placeholder]="'Select multiple'"
77+
>
3678
</ngds-picklist-input>
37-
<ngds-picklist-input [control]="form?.controls?.['displayOptionsPicklistMulti']" [selectionListItems]="displayProvinceList" [multiselect]="true" [resetButton]="true" [selectAllButton]="true"
38-
[displaySelectionItems]="'disabled'"
39-
[label]="'Disable selected options'"
40-
[placeholder]="'Select multiple'">
79+
<ngds-picklist-input
80+
[control]="form?.controls?.['displayOptionsPicklistMulti2']"
81+
[selectionListItems]="displayProvinceList"
82+
[multiselect]="true"
83+
[resetButton]="true"
84+
[selectAllButton]="true"
85+
[displaySelectionItems]="'disabled'"
86+
[label]="'Disable selected options'"
87+
[placeholder]="'Select multiple'"
88+
>
4189
</ngds-picklist-input>
4290
</demonstrator>
4391
</section>
4492

45-
<section #section id="basicTypeaheadMulti" class="mb-5 mt-3">
93+
<section
94+
#section
95+
id="basicTypeaheadMulti"
96+
class="mb-5 mt-3"
97+
>
4698
<h3>Basic typeahead multiselect</h3>
4799
<p>
48100
Provide the list of selection options as an array in <code>[selectionListItems]</code>.
49101
</p>
50-
<demonstrator #basicTypeaheadMulti
51-
[control]="form?.controls?.['basicTypeaheadMulti']" [htmlFile]="snippets?.basicTypeaheadMulti?.html" [tsFile]="snippets?.basicTypeaheadMulti?.ts">
52-
<ngds-typeahead-input [control]="form?.controls?.['basicTypeaheadMulti']" [selectionListItems]="displayProvinceList" [multiselect]="true" [resetButton]="true" [selectAllButton]="true"
53-
[placeholder]="'Select multiple'">
102+
<demonstrator
103+
#basicTypeaheadMulti
104+
[control]="form?.controls?.['basicTypeaheadMulti']"
105+
[htmlFile]="snippets?.basicTypeaheadMulti?.html"
106+
[tsFile]="snippets?.basicTypeaheadMulti?.ts"
107+
>
108+
<ngds-typeahead-input
109+
[control]="form?.controls?.['basicTypeaheadMulti']"
110+
[selectionListItems]="displayProvinceList"
111+
[multiselect]="true"
112+
[resetButton]="true"
113+
[selectAllButton]="true"
114+
[placeholder]="'Select multiple'"
115+
>
54116
</ngds-typeahead-input>
55117
</demonstrator>
56118
</section>
57119

58-
<section #section id="programmaticTypeaheadMulti" class="mb-5 mt-3">
120+
<section
121+
#section
122+
id="programmaticTypeaheadMulti"
123+
class="mb-5 mt-3"
124+
>
59125
<h3>Programmatically set typeahead multiselect</h3>
60126
<p>The example below selects only territories when you click the button.</p>
61-
<demonstrator #programmaticTypeaheadMulti
62-
[control]="form?.controls?.['programmaticTypeaheadMulti']" [htmlFile]="snippets?.programmaticTypeaheadMulti?.html" [tsFile]="snippets?.programmaticTypeaheadMulti?.ts">
63-
<button class="btn btn-primary my-2" (click)="programSet()">Set value</button>
64-
<ngds-typeahead-input [control]="form?.controls?.['programmaticTypeaheadMulti']" [selectionListItems]="displayProvinceList" [multiselect]="true" [resetButton]="true" [selectAllButton]="true"
65-
[placeholder]="'Select multiple'">
127+
<demonstrator
128+
#programmaticTypeaheadMulti
129+
[control]="form?.controls?.['programmaticTypeaheadMulti']"
130+
[htmlFile]="snippets?.programmaticTypeaheadMulti?.html"
131+
[tsFile]="snippets?.programmaticTypeaheadMulti?.ts"
132+
>
133+
<button
134+
class="btn btn-primary my-2"
135+
(click)="programSet()"
136+
>Set value</button>
137+
<ngds-typeahead-input
138+
[control]="form?.controls?.['programmaticTypeaheadMulti']"
139+
[selectionListItems]="displayProvinceList"
140+
[multiselect]="true"
141+
[resetButton]="true"
142+
[selectAllButton]="true"
143+
[placeholder]="'Select multiple'"
144+
>
66145
</ngds-typeahead-input>
67146
</demonstrator>
68147
</section>
69148

70-
<section #section id="displayOptionsTypeaheadMulti" class="mb-5 mt-3">
149+
<section
150+
#section
151+
id="displayOptionsTypeaheadMulti"
152+
class="mb-5 mt-3"
153+
>
71154
<h3>Hide or disable selected items</h3>
72155
<p>Use <code>[displaySelectionItems]</code> to hide or disable options that have already been selected.</p>
73156
<demonstrator
74-
[control]="form?.controls?.['displayOptionsTypeaheadMulti']" [htmlFile]="snippets?.displayOptionsTypeaheadMulti?.html" [tsFile]="snippets?.displayOptionsTypeaheadMulti?.ts">
75-
<ngds-typeahead-input [control]="form?.controls?.['displayOptionsTypeaheadMulti']" [selectionListItems]="displayProvinceList" [multiselect]="true" [resetButton]="true" [selectAllButton]="true"
76-
[displaySelectionItems]="'false'"
77-
[label]="'Hide selected options'"
78-
[placeholder]="'Select multiple'">
157+
[control]="form?.controls?.['displayOptionsTypeaheadMulti']"
158+
[htmlFile]="snippets?.displayOptionsTypeaheadMulti?.html"
159+
[tsFile]="snippets?.displayOptionsTypeaheadMulti?.ts"
160+
>
161+
<ngds-typeahead-input
162+
[control]="form?.controls?.['displayOptionsTypeaheadMulti']"
163+
[selectionListItems]="displayProvinceList"
164+
[multiselect]="true"
165+
[resetButton]="true"
166+
[selectAllButton]="true"
167+
[displaySelectionItems]="'false'"
168+
[label]="'Hide selected options'"
169+
[placeholder]="'Select multiple'"
170+
>
79171
</ngds-typeahead-input>
80-
<ngds-typeahead-input [control]="form?.controls?.['displayOptionsTypeaheadMulti']" [selectionListItems]="displayProvinceList" [multiselect]="true" [resetButton]="true" [selectAllButton]="true"
81-
[displaySelectionItems]="'disabled'"
82-
[label]="'Disable selected options'"
83-
[placeholder]="'Select multiple'">
172+
<ngds-typeahead-input
173+
[control]="form?.controls?.['displayOptionsTypeaheadMulti2']"
174+
[selectionListItems]="displayProvinceList"
175+
[multiselect]="true"
176+
[resetButton]="true"
177+
[selectAllButton]="true"
178+
[displaySelectionItems]="'disabled'"
179+
[label]="'Disable selected options'"
180+
[placeholder]="'Select multiple'"
181+
>
84182
</ngds-typeahead-input>
85183
</demonstrator>
86184
</section>

‎src/app/forms/multiselects/multiselects.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,11 @@ export class MultiselectsComponent implements OnInit, AfterViewInit {
8181
basicTypeaheadMulti: new UntypedFormControl(null),
8282
programmaticTypeaheadMulti: new UntypedFormControl(null),
8383
displayOptionsTypeaheadMulti: new UntypedFormControl(null),
84+
displayOptionsTypeaheadMulti2: new UntypedFormControl(null),
8485
basicPicklistMulti: new UntypedFormControl(null),
8586
programmaticPicklistMulti: new UntypedFormControl(null),
8687
displayOptionsPicklistMulti: new UntypedFormControl(null),
88+
displayOptionsPicklistMulti2: new UntypedFormControl(null),
8789
});
8890
for (const control of Object.keys(this.form.controls)) {
8991
this.fields[control] = this.form.controls[control];

0 commit comments

Comments
 (0)