Skip to content

Commit 5e78f68

Browse files
ghiscodingghiscoding
committed
fix: multiple fixes identified after adding it to external project
 fixes multiple bugs found after implementing it into Slickgrid-Universal: - `setSelects` should work even after creating a new multiple-select dynamically from an empty select DOM element and providing an array to the `data` property - ms-drop DOM element should also be able to add a `name` attribute when its `name` option is provided - locale aren't loaded asynchronously anymore and shouldn't be either because that was causing the ms instance to longer be synchronous when it should - tooltip title values should be displayed with proper delimiter when provided - add new `minHeight` option since we already have a `maxHeight` option
1 parent 385b5c6 commit 5e78f68

File tree

11 files changed

+226
-36
lines changed

11 files changed

+226
-36
lines changed

‎demo/src/app-routing.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Example09 from './examples/example09';
1111
import Example10 from './examples/example10';
1212
import Example11 from './examples/example11';
1313
import Example12 from './examples/example12';
14+
import Example13 from './examples/example13';
1415
import Options01 from './options/options01';
1516
import Options02 from './options/options02';
1617
import Options03 from './options/options03';
@@ -78,6 +79,7 @@ export const exampleRouting = [
7879
{ name: 'example10', view: '/src/examples/example10.html', viewModel: Example10, title: 'Large Select' },
7980
{ name: 'example11', view: '/src/examples/example11.html', viewModel: Example11, title: 'The Themes' },
8081
{ name: 'example12', view: '/src/examples/example12.html', viewModel: Example12, title: 'Checkbox/Radio Icons' },
82+
{ name: 'example13', view: '/src/examples/example13.html', viewModel: Example13, title: 'Dynamically Create Select' },
8183
],
8284
},
8385
{

‎demo/src/examples/example13.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<div class="row mb-2">
2+
<div class="col-md-12 title-desc">
3+
<h2 class="bd-title">
4+
Dynamically create Multiple-Select with Data collection
5+
<span class="float-end links">
6+
Code <span class="fa fa-link"></span>
7+
<span class="small">
8+
<a
9+
target="_blank"
10+
href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.html"
11+
>html</a
12+
>
13+
|
14+
<a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.ts"
15+
>ts</a
16+
>
17+
</span>
18+
</span>
19+
</h2>
20+
<div class="demo-subtitle">
21+
Dynamically create a Multiple-Select instance with <code>data</code> property.
22+
<br />
23+
</div>
24+
</div>
25+
</div>
26+
27+
<div>
28+
<div class="mb-3 row">
29+
<label class="col-sm-2"> Create </label>
30+
31+
<div class="col-sm-10">
32+
<button id="destroyBtn" class="btn btn-danger btn-sm">Destroy</button>
33+
<button id="createBtn" class="btn btn-primary btn-sm">Dynamically Create</button>
34+
</div>
35+
</div>
36+
37+
<div class="mb-3 row">
38+
<label class="col-sm-3 text-end">Use Select Option Label & Render HTML</label>
39+
40+
<div class="col-sm-9">
41+
<select id="select1" class="full-width"></select>
42+
</div>
43+
</div>
44+
</div>

‎demo/src/examples/example13.ts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
2+
3+
export default class Example {
4+
createBtnElm?: HTMLButtonElement | null;
5+
destroyBtnElm?: HTMLButtonElement | null;
6+
ms1?: MultipleSelectInstance;
7+
8+
mount() {
9+
this.createBtnElm = document.querySelector('#createBtn');
10+
this.destroyBtnElm = document.querySelector('#destroyBtn');
11+
this.createBtnElm!.addEventListener('click', this.createMultipleSelect.bind(this));
12+
this.destroyBtnElm!.addEventListener('click', this.destroyMultiSelect.bind(this));
13+
}
14+
15+
createMultipleSelect() {
16+
this.ms1 = multipleSelect('#select1', {
17+
name: 'my-select',
18+
single: false,
19+
useSelectOptionLabelToHtml: true,
20+
data: [
21+
{
22+
text: '<i class="fa fa-star"></i> January',
23+
value: 1,
24+
},
25+
{
26+
text: 'February',
27+
value: 2,
28+
},
29+
{
30+
text: 'March',
31+
value: 3,
32+
},
33+
{
34+
text: 'April',
35+
value: 4,
36+
},
37+
{
38+
text: 'May',
39+
value: 5,
40+
},
41+
{
42+
text: 'June',
43+
value: 6,
44+
},
45+
{
46+
text: 'July',
47+
value: 7,
48+
},
49+
{
50+
text: 'August',
51+
value: 8,
52+
},
53+
{
54+
text: 'September',
55+
value: 9,
56+
},
57+
{
58+
text: 'October',
59+
value: 10,
60+
},
61+
{
62+
text: 'November',
63+
value: 11,
64+
},
65+
{
66+
text: 'December',
67+
value: 12,
68+
},
69+
],
70+
}) as MultipleSelectInstance;
71+
72+
this.ms1.setSelects([1, 3, 4]);
73+
}
74+
75+
destroyMultiSelect() {
76+
console.log('destroy');
77+
this.ms1?.destroy();
78+
this.ms1 = undefined; // remove detached element
79+
}
80+
81+
unmount() {
82+
// destroy ms instance(s) to avoid DOM leaks
83+
this.destroyMultiSelect();
84+
this.createBtnElm!.removeEventListener('click', this.createMultipleSelect.bind(this));
85+
this.destroyBtnElm!.removeEventListener('click', this.destroyMultiSelect.bind(this));
86+
}
87+
}

‎demo/src/methods/methods11.ts‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
11
import { MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
22

33
export default class Example {
4+
buildBtnElm?: HTMLButtonElement | null;
5+
destroyBtnElm?: HTMLButtonElement | null;
46
ms1?: MultipleSelectInstance | null;
57

68
mount() {
9+
this.buildBtnElm = document.querySelector('#buildBtn');
10+
this.destroyBtnElm = document.querySelector('#destroyBtn');
11+
this.destroyBtnElm!.addEventListener('click', this.destroyMultiSelect.bind(this));
12+
this.buildBtnElm!.addEventListener('click', this.createMultipleSelect.bind(this));
13+
714
this.ms1 = multipleSelect('select') as MultipleSelectInstance | null;
15+
}
816

9-
document.querySelector('#destroyBtn')!.addEventListener('click', () => {
10-
this.ms1?.destroy();
11-
this.ms1 = null; // remove detached element
12-
});
17+
createMultipleSelect() {
18+
this.ms1 = multipleSelect('select') as MultipleSelectInstance;
19+
}
1320

14-
document.querySelector('#buildBtn')!.addEventListener('click', () => {
15-
this.ms1 = multipleSelect('select') as MultipleSelectInstance;
16-
});
21+
destroyMultiSelect() {
22+
this.ms1?.destroy();
23+
this.ms1 = null; // remove detached element
1724
}
1825

1926
unmount() {
2027
// destroy ms instance(s) to avoid DOM leaks
21-
this.ms1?.destroy();
22-
this.ms1 = undefined;
28+
this.destroyMultiSelect();
29+
this.buildBtnElm!.removeEventListener('click', this.destroyMultiSelect.bind(this));
30+
this.destroyBtnElm!.removeEventListener('click', this.createMultipleSelect.bind(this));
2331
}
2432
}

‎demo/src/options/options17.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,4 +92,27 @@ <h2 class="bd-title">
9292
</div>
9393
</div>
9494
</div>
95+
96+
<div class="mb-3 row">
97+
<label class="col-sm-2"> Body Container </label>
98+
99+
<div class="col-sm-10">
100+
<div class="parent" style="overflow: hidden">
101+
<select multiple="multiple" class="select4 full-width">
102+
<option value="1">January</option>
103+
<option value="2">February</option>
104+
<option value="3">March</option>
105+
<option value="4">April</option>
106+
<option value="5">May</option>
107+
<option value="6">June</option>
108+
<option value="7">July</option>
109+
<option value="8">August</option>
110+
<option value="9">September</option>
111+
<option value="10">October</option>
112+
<option value="11">November</option>
113+
<option value="12">December</option>
114+
</select>
115+
</div>
116+
</div>
117+
</div>
95118
</div>

‎demo/src/options/options17.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,24 @@ export default class Example {
44
ms1?: MultipleSelectInstance;
55
ms2?: MultipleSelectInstance;
66
ms3?: MultipleSelectInstance;
7+
ms4?: MultipleSelectInstance;
78

89
mount() {
910
this.ms1 = multipleSelect('.select1') as MultipleSelectInstance;
1011
this.ms2 = multipleSelect('.select2') as MultipleSelectInstance;
1112
this.ms3 = multipleSelect('.select3', { container: '.my-container' }) as MultipleSelectInstance;
13+
this.ms4 = multipleSelect('.select4', { autoAdjustDropPosition: true, container: 'body' }) as MultipleSelectInstance;
1214
}
1315

1416
unmount() {
1517
// destroy ms instance(s) to avoid DOM leaks
1618
this.ms1?.destroy();
1719
this.ms2?.destroy();
1820
this.ms3?.destroy();
21+
this.ms4?.destroy();
1922
this.ms1 = undefined;
2023
this.ms2 = undefined;
2124
this.ms3 = undefined;
25+
this.ms4 = undefined;
2226
}
2327
}

‎lib/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
".": {
99
"import": "./dist/esm/multiple-select.js",
1010
"require": "./dist/cjs/multiple-select.js",
11-
"default": "./dist/esm/multiple-select.js"
11+
"default": "./dist/esm/multiple-select.js",
12+
"types": "./dist/types/index.d.ts"
1213
},
1314
"./*": "./*"
1415
},

0 commit comments

Comments
 (0)