simp-select 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,15 +8,16 @@ export const simpleSelectLocale: ISimpleSelectLocale = {
8
8
  all: 'all',
9
9
  ok: 'Ok',
10
10
  cansel: 'Cansel',
11
-
12
11
  selectAll: 'Select all',
13
12
  resetAll: 'Reset all',
14
13
  };
15
14
  export const simpleSelectionOptions: ISimpleSelectOptions = {
16
- isSearch: true,
15
+ isSearch: false,
17
16
  isSearchInDropdown: false,
18
17
 
19
- countShowSelected: 2,
18
+ countShowSelected: 3,
19
+ isOnlyPlaceholder: false,
20
+
20
21
  isConfirmInMulti: false,
21
22
  isConfirmInMultiOkClickOutside: false,
22
23
 
@@ -35,7 +36,7 @@ export const simpleSelectionOptions: ISimpleSelectOptions = {
35
36
 
36
37
  };
37
38
 
38
- export const nameSelect = 'SimSel';
39
+ export const nameSelect = 'SimpSelect';
39
40
  const markPrefix = 'simple-select-';
40
41
  export const nameMark = `${markPrefix}init`;
41
42
 
@@ -46,7 +46,9 @@
46
46
  <div class="items">
47
47
  <div class="item">
48
48
  <select id="select_first"
49
- disabled
49
+
50
+ data-simple-placeholder="Custom title"
51
+ data-simple-is-only-placeholder="true"
50
52
  multiple>
51
53
  <option value="a1">a 1</option>
52
54
  <option value="a2">a 2</option>
@@ -95,6 +97,8 @@
95
97
 
96
98
  <div class="item">
97
99
  <select
100
+
101
+ data-simple-select-search-dropdown="true"
98
102
  data-simple-show-checkbox="true"
99
103
  class="color_red"
100
104
  data-simple-add-classes="class1"
@@ -116,33 +120,37 @@
116
120
  </select>
117
121
  </div>
118
122
 
119
- <select
120
- data-simple-add-classes="class1 class2"
121
- data-simple-item-html-before="<div>before</div>"
122
- data-simple-item-html-after="<div>after</div>"
123
- data-simple-select-search-dropdown="true"
124
- data-simple-up="true"
125
- >
126
- <option>Опция 5.1</option>
127
- <option>Опция 5.2</option>
128
- </select>
123
+ <div class="item">
124
+ <select
125
+ data-simple-add-classes="class1 class2"
126
+ data-simple-item-html-before="<div>before</div>"
127
+ data-simple-item-html-after="<div>after</div>"
128
+ data-simple-select-search-dropdown="true"
129
+ data-simple-up="true"
130
+ >
131
+ <option>Опция 5.1</option>
132
+ <option>Опция 5.2</option>
133
+ </select>
134
+ </div>
135
+
129
136
 
130
137
  <!--
131
138
 
132
139
  <select
133
- data-simple-select-search
134
- data-simple-select-search-dropdown
140
+ data-simple-select-search="true"
141
+ data-simple-select-search-dropdown="true"
142
+ data-simple-is-only-placeholder="true"
135
143
  data-simple-count-shows-selected="3"
136
144
  data-simple-is-confirm="true" // only multiselect
137
- data-simple-debounce-time // only multiselect
145
+ data-simple-debounce-time="1000" // only multiselect
138
146
  data-simple-placeholder="text"
139
147
  data-simple-reset-all="true" // only multiselect
140
148
  data-simple-select-all="true" // only multiselect
141
149
  data-simple-show-checkbox="true" // only not multiselect
142
150
 
143
- data-simple-item-html-before="<div>before</div>"
144
- data-simple-item-html-after="<div>after</div>"
145
- data-simple-add-classes="class1 class2"
151
+ !data-simple-item-html-before="<div>before</div>"
152
+ !data-simple-item-html-after="<div>after</div>"
153
+ !data-simple-add-classes="class1 class2"
146
154
 
147
155
  data-simple-float-width="1000"
148
156
  data-simple-up="true"
@@ -171,24 +179,24 @@
171
179
  <script>
172
180
 
173
181
  const sel = new SimpleSelect('select', {
174
- callbackOpen: (item) => {
175
- console.log('open', item);
176
- },
177
- callbackClose: (item) => {
178
- console.log('close', item);
179
- },
180
- callbackDestroy: (item) => {
181
- console.log('callbackDestroy', item);
182
- },
183
- // detectNative: () => {
184
- // return false;
182
+ // callbackOpen: (item) => {
183
+ // console.log('open', item);
184
+ // },
185
+ // callbackClose: (item) => {
186
+ // console.log('close', item);
187
+ // },
188
+ // callbackDestroy: (item) => {
189
+ // console.log('callbackDestroy', item);
190
+ // },
191
+ // // detectNative: () => {
192
+ // // return false;
193
+ // // },
194
+ // callbackChangeSelect: (e, that) => {
195
+ // console.group();
196
+ // console.log(e);
197
+ // console.log(that);
198
+ // console.groupEnd();
185
199
  // },
186
- callbackChangeSelect: (e, that) => {
187
- console.group();
188
- console.log(e);
189
- console.log(that);
190
- console.groupEnd();
191
- },
192
200
 
193
201
  // isUp: true,
194
202
  // sepChars: ',',
@@ -198,54 +206,56 @@
198
206
  // debounceTime: 2000
199
207
  })
200
208
  // @ts-ignore
201
- window['sel'] = sel;
202
-
203
- setTimeout(() => {
204
- console.log('first', sel.getSelectFirst());
205
-
206
- const second = document.getElementById('select_second');
207
-
208
- const id = second.getAttribute('data-simple-select-init');
209
-
210
- console.log('by id', sel.getSelectById(id));
211
- }, 1500)
212
-
213
- const app = document.querySelector('#app')
214
- const select = document.createElement('select');
215
- select.innerHTML = '<option value="1">1</option><option value="2">2</option>'
216
- app.innerHTML = `
217
- <div>
218
- <select class="addSelect">
219
- <option selected>new option 0</option>
220
- <option value='1'>new option</option>
221
- <option value='2'>new option2</option>
222
- <option value='3'>new option3</option>
223
- <select>
224
- </div>
225
- `
226
- app.append(select);
227
- const sel3 = new SimpleSelect(select)
228
- window['sel3'] = sel3;
229
-
230
- setTimeout(() => {
231
- const sel2 = new SimpleSelect('.addSelect', {
232
- locale: {
233
- noSearch: 'Не найдено: ',
234
- searchText: 'Поиск',
235
- title: 'Выбрать',
236
- selected: 'Выбрано:',
237
- all: 'все',
238
- cansel: 'Отмена',
239
- ok: 'OK',
240
- resetAll: 'reset all',
241
- selectAll: 'select all'
242
- }
243
- })
244
- window['sel2'] = sel2;
245
- }, 500)
209
+ // window['sel'] = sel;
210
+ //
211
+ // setTimeout(() => {
212
+ // console.log('first', sel.getSelectFirst());
213
+ //
214
+ // const second = document.getElementById('select_second');
215
+ //
216
+ // const id = second.getAttribute('data-simple-select-init');
217
+ //
218
+ // console.log('by id', sel.getSelectById(id));
219
+ // }, 1500)
220
+ //
221
+ // const app = document.querySelector('#app')
222
+ // const select = document.createElement('select');
223
+ // select.innerHTML = '<option value="1">1</option><option value="2">2</option>'
224
+ // app.innerHTML = `
225
+ // <div>
226
+ // <select class="addSelect">
227
+ // <option selected>new option 0</option>
228
+ // <option value='1'>new option</option>
229
+ // <option value='2'>new option2</option>
230
+ // <option value='3'>new option3</option>
231
+ // <select>
232
+ // </div>
233
+ // `
234
+ // app.append(select);
235
+ // const sel3 = new SimpleSelect(select)
236
+ // window['sel3'] = sel3;
237
+ //
238
+ // setTimeout(() => {
239
+ // const sel2 = new SimpleSelect('.addSelect', {
240
+ // locale: {
241
+ // noSearch: 'Не найдено: ',
242
+ // searchText: 'Поиск',
243
+ // title: 'Выбрать',
244
+ // selected: 'Выбрано:',
245
+ // all: 'все',
246
+ // cansel: 'Отмена',
247
+ // ok: 'OK',
248
+ // resetAll: 'reset all',
249
+ // selectAll: 'select all'
250
+ // }
251
+ // })
252
+ // window['sel2'] = sel2;
253
+ // }, 500)
246
254
 
247
255
  // setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
248
256
 
257
+
258
+
249
259
  </script>
250
260
 
251
261
 
@@ -0,0 +1,136 @@
1
+ if (!Array.from) {
2
+ Array.from = (function () {
3
+ var toStr = Object.prototype.toString;
4
+ var isCallable = function (fn) {
5
+ return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
6
+ };
7
+ var toInteger = function (value) {
8
+ var number = Number(value);
9
+ if (isNaN(number)) { return 0; }
10
+ if (number === 0 || !isFinite(number)) { return number; }
11
+ return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
12
+ };
13
+ var maxSafeInteger = Math.pow(2, 53) - 1;
14
+ var toLength = function (value) {
15
+ var len = toInteger(value);
16
+ return Math.min(Math.max(len, 0), maxSafeInteger);
17
+ };
18
+
19
+ return function from(arrayLike/*, mapFn, thisArg */) {
20
+ var C = this;
21
+
22
+ var items = Object(arrayLike);
23
+
24
+ if (arrayLike == null) {
25
+ throw new TypeError('Array.from requires an array-like object - not null or undefined');
26
+ }
27
+
28
+ var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
29
+ var T;
30
+ if (typeof mapFn !== 'undefined') {
31
+ if (!isCallable(mapFn)) {
32
+ throw new TypeError('Array.from: when provided, the second argument must be a function');
33
+ }
34
+
35
+ if (arguments.length > 2) {
36
+ T = arguments[2];
37
+ }
38
+ }
39
+
40
+ var len = toLength(items.length);
41
+
42
+
43
+ var A = isCallable(C) ? Object(new C(len)) : new Array(len);
44
+
45
+ var k = 0;
46
+ var kValue;
47
+ while (k < len) {
48
+ kValue = items[k];
49
+ if (mapFn) {
50
+ A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
51
+ } else {
52
+ A[k] = kValue;
53
+ }
54
+ k += 1;
55
+ }
56
+ A.length = len;
57
+ return A;
58
+ };
59
+ }());
60
+ }
61
+
62
+ if (!Array.prototype.forEach) {
63
+ Array.prototype.forEach = function (callback, thisArg) {
64
+ var T, k;
65
+
66
+ if (this == null) {
67
+ throw new TypeError(" this is null or not defined");
68
+ }
69
+
70
+ var O = Object(this);
71
+
72
+ var len = O.length >>> 0;
73
+
74
+ if (typeof callback !== "function") {
75
+ throw new TypeError(callback + " is not a function");
76
+ }
77
+
78
+ if (arguments.length > 1) {
79
+ T = thisArg;
80
+ }
81
+
82
+ k = 0;
83
+
84
+ while (k < len) {
85
+ var kValue;
86
+
87
+ if (k in O) {
88
+ kValue = O[k];
89
+
90
+ callback.call(T, kValue, k, O);
91
+ }
92
+ k++;
93
+ }
94
+ };
95
+ }
96
+
97
+ if (typeof window !== 'undefined' && window.NodeList && !NodeList.prototype.forEach) {
98
+ NodeList.prototype.forEach = function (callback, thisArg) {
99
+ thisArg = thisArg || window;
100
+ for (var i = 0; i < this.length; i++) {
101
+ callback.call(thisArg, this[i], i, this);
102
+ }
103
+ };
104
+ }
105
+
106
+ if (!Element.prototype.matches) {
107
+ Element.prototype.matches = Element.prototype.msMatchesSelector ||
108
+ Element.prototype.webkitMatchesSelector;
109
+ }
110
+
111
+ if (!Element.prototype.closest) {
112
+ Element.prototype.closest = function(s) {
113
+ var el = this;
114
+
115
+ do {
116
+ if (Element.prototype.matches.call(el, s)) return el;
117
+ el = el.parentElement || el.parentNode;
118
+ } while (el !== null && el.nodeType === 1);
119
+ return null;
120
+ };
121
+ }
122
+
123
+ (function () {
124
+ if ( typeof window.CustomEvent === "function" ) return false; //If not IE
125
+
126
+ function CustomEvent ( event, params ) {
127
+ params = params || { bubbles: false, cancelable: false, detail: undefined };
128
+ var evt = document.createEvent( 'CustomEvent' );
129
+ evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
130
+ return evt;
131
+ }
132
+
133
+ CustomEvent.prototype = window.Event.prototype;
134
+
135
+ window.CustomEvent = CustomEvent;
136
+ })();
@@ -1,5 +1,6 @@
1
1
  import { ISimpleSelectOptions, ISimpleSelectProps } from './types/simpleSelect.types';
2
2
  import { selectorType } from './types/item.types';
3
+ import './polyfill.js';
3
4
 
4
5
  import {
5
6
  nameMark, nameSelect, simpleSelectionOptions,
@@ -79,7 +80,7 @@ export default class SimpleSelect {
79
80
  createMethods(select: SimpleSelectItem) {
80
81
  const self = this;
81
82
  return {
82
- getInstance: () => select.getSelect(),
83
+ getNativeSelect: () => select.getSelect(),
83
84
  reload() {
84
85
  self.rebuild(select);
85
86
  },
@@ -54,7 +54,7 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
54
54
  }
55
55
 
56
56
  if (!this.isNative && this.options.floatWidth) {
57
- this.mql = window.matchMedia(`(max-width: ${this.options.floatWidth}px)`);
57
+ this.mql = window.matchMedia(`screen and (max-width: ${this.options.floatWidth}px)`);
58
58
  if (this.mql) {
59
59
  // @ts-ignore
60
60
  this.mql.onchange = this.handleResize;
@@ -67,16 +67,12 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
67
67
  if (!val && this.options.isConfirmInMulti) {
68
68
  this.createList();
69
69
  }
70
- if (val) {
70
+ if (!val) {
71
71
  if (this.elemInputSearch) {
72
72
  this.elemInputSearch.value = '';
73
+ this.state.setState('filterStr', '');
73
74
  }
74
75
  }
75
- // if (!val) {
76
- // if (this.options.isConfirmInMulti) {
77
- // this.triggerInit();
78
- // }
79
- // }
80
76
  });
81
77
 
82
78
  this.state.subscribe('filterStr', (val: string) => {
@@ -381,6 +377,11 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
381
377
  this.options.callbackOpen(this);
382
378
  }
383
379
  this.countOpen++;
380
+ if (this.elemDropDown) {
381
+ setTimeout(() => {
382
+ this.elemDropDown!.scrollTop = 0;
383
+ }, 10);
384
+ }
384
385
  } else {
385
386
  this.state.setState('filterList', '');
386
387
  this.elemWrap.classList.remove('SimpleSel--open');
@@ -444,7 +445,7 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
444
445
  items.forEach((group) => {
445
446
  let isShowGroup = false;
446
447
  group.items.forEach((item) => {
447
- if (item.title.toLowerCase().includes(val)) {
448
+ if (item.title.toLowerCase().indexOf(val) >= 0) {
448
449
  isShowGroup = true;
449
450
  item.isShowFilter = true;
450
451
  } else {
@@ -111,9 +111,8 @@ export class SimpleSelectItemDOM {
111
111
  this.options.changeBodyLi = options.changeBodyLi;
112
112
  }
113
113
 
114
- const dataConfirm = this.$select.dataset[toCamelCase('simple-is-confirm')];
115
- if (this.isMulti && dataConfirm) {
116
- this.options.isConfirmInMulti = dataConfirm === '1' || dataConfirm === 'true';
114
+ if (this.isMulti && this.$select.hasAttribute('data-simple-is-confirm')) {
115
+ this.options.isConfirmInMulti = ifTrueDataAttr(this.$select.getAttribute('data-simple-is-confirm'));
117
116
  }
118
117
 
119
118
  this.optionOverride();
@@ -131,10 +130,8 @@ export class SimpleSelectItemDOM {
131
130
  this.titlePlaceholder = this.options.locale.title;
132
131
  }
133
132
 
134
- const dataResetAll = toCamelCase('simple-reset-all');
135
- if (dataResetAll in this.$select.dataset) {
136
- const resReset = this.$select.dataset[dataResetAll];
137
- this.options.resetAll = !(resReset === 'false' || resReset === '0');
133
+ if (this.$select.hasAttribute('data-simple-reset-all')) {
134
+ this.options.resetAll = ifTrueDataAttr(this.$select.getAttribute('data-simple-reset-all'));
138
135
  }
139
136
  // const dataSelect = toCamelCase('simple-select-all');
140
137
  // if (dataSelect in this.$select.dataset) {
@@ -165,6 +162,10 @@ export class SimpleSelectItemDOM {
165
162
  if (this.$select.hasAttribute('data-simple-up')) {
166
163
  this.options.isUp = ifTrueDataAttr(this.$select.getAttribute('data-simple-up'));
167
164
  }
165
+
166
+ if (this.$select.hasAttribute('data-simple-is-only-placeholder')) {
167
+ this.options.isOnlyPlaceholder = ifTrueDataAttr(this.$select.getAttribute('data-simple-is-only-placeholder'));
168
+ }
168
169
  }
169
170
 
170
171
  initDom() {
@@ -184,7 +185,11 @@ export class SimpleSelectItemDOM {
184
185
  this.state.subscribe('isFloat', (val: boolean) => {
185
186
  this.isFloatWidth = val;
186
187
  const cls = getClass('float', true);
187
- this.elemWrap.classList.toggle(cls, val);
188
+ if (val) {
189
+ this.elemWrap.classList.add(cls);
190
+ } else {
191
+ this.elemWrap.classList.remove(cls);
192
+ }
188
193
  });
189
194
  }
190
195
 
@@ -192,7 +197,11 @@ export class SimpleSelectItemDOM {
192
197
  const tabIndex = isOpen ? 0 : -1;
193
198
 
194
199
  if (this.state.getState('isFloat')) {
195
- document.body.classList.toggle(this.bodyOpenClass, isOpen);
200
+ if (isOpen) {
201
+ document.body.classList.add(this.bodyOpenClass);
202
+ } else {
203
+ document.body.classList.remove(this.bodyOpenClass);
204
+ }
196
205
  }
197
206
 
198
207
  if (this.elemInputSearch) {
@@ -224,7 +233,7 @@ export class SimpleSelectItemDOM {
224
233
  this.elemTopBody.tabIndex = this.isDisabled ? -1 : 0;
225
234
 
226
235
  this.createIcon();
227
- this.elemTop.append(this.elemTopBody);
236
+ this.elemTop.appendChild(this.elemTopBody);
228
237
  let resClassesWrap = initClass;
229
238
  if (this.options.isCloneClass) {
230
239
  resClassesWrap += ` ${this.cloneClasses}`;
@@ -250,7 +259,7 @@ export class SimpleSelectItemDOM {
250
259
  parentElement.replaceChild(this.elemWrap, this.$select);
251
260
  this.elemWrap.appendChild(this.$select);
252
261
  }
253
- this.elemWrap.append(this.elemTop);
262
+ this.elemWrap.appendChild(this.elemTop);
254
263
 
255
264
  if (this.isNative) {
256
265
  this.$select.classList.add(getClass('native', true, this.classSelectInit));
@@ -276,7 +285,8 @@ export class SimpleSelectItemDOM {
276
285
  this.elemControl = document.createElement('div');
277
286
  this.elemControl.classList.add(getClass('controls'));
278
287
 
279
- this.elemDropDown.prepend(this.elemControl);
288
+ // this.elemDropDown.prepend(this.elemControl);
289
+ this.elemDropDown.insertBefore(this.elemControl, this.elemDropDown.childNodes[0]);
280
290
 
281
291
  const classControl = getClass('control');
282
292
  if (this.options.selectAll) {
@@ -285,7 +295,7 @@ export class SimpleSelectItemDOM {
285
295
 
286
296
  this.elemSelectAll.innerHTML = `<span class="${getClass('select_all__icon')}"></span> ${this.options.locale.selectAll}`;
287
297
 
288
- this.elemControl.append(this.elemSelectAll);
298
+ this.elemControl.appendChild(this.elemSelectAll);
289
299
  }
290
300
 
291
301
  if (this.options.resetAll) {
@@ -294,14 +304,14 @@ export class SimpleSelectItemDOM {
294
304
 
295
305
  this.elemResetAll.innerHTML = `<span class="${getClass('reset_all__icon')}"></span> ${this.options.locale.resetAll}`;
296
306
 
297
- this.elemControl.append(this.elemResetAll);
307
+ this.elemControl.appendChild(this.elemResetAll);
298
308
  }
299
309
  }
300
310
 
301
311
  private createIcon() {
302
312
  const icon = document.createElement('span');
303
313
  icon.className = getClass('icon');
304
- this.elemTopBody.append(icon);
314
+ this.elemTopBody.appendChild(icon);
305
315
  }
306
316
 
307
317
  private createDropDown() {
@@ -314,13 +324,13 @@ export class SimpleSelectItemDOM {
314
324
 
315
325
  this.elemListBody.className = getClass('list');
316
326
 
317
- this.elemWrap.append(this.elemDropDown);
318
- this.elemDropDown.append(this.elemListBody);
327
+ this.elemWrap.appendChild(this.elemDropDown);
328
+ this.elemDropDown.appendChild(this.elemListBody);
319
329
 
320
330
  this.elemDropDownClose = createButton();
321
331
  this.elemDropDownClose.classList.add(getClass('close'));
322
332
 
323
- this.elemDropDown.append(this.elemDropDownClose);
333
+ this.elemDropDown.appendChild(this.elemDropDownClose);
324
334
 
325
335
  if (this.isMulti) {
326
336
  this.createIsConfirmInMultiHTML();
@@ -334,8 +344,8 @@ export class SimpleSelectItemDOM {
334
344
  const classesItem = getClass('bottom_control');
335
345
  this.confirmOk = createButton();
336
346
  this.confirmNo = createButton();
337
- confirm.append(this.confirmOk);
338
- confirm.append(this.confirmNo);
347
+ confirm.appendChild(this.confirmOk);
348
+ confirm.appendChild(this.confirmNo);
339
349
 
340
350
  this.confirmOk.innerHTML = this.options.locale.ok;
341
351
  this.confirmNo.innerHTML = this.options.locale.cansel;
@@ -349,22 +359,28 @@ export class SimpleSelectItemDOM {
349
359
  }
350
360
  confirm.className = classes;
351
361
 
352
- this.elemDropDown?.append(confirm);
362
+ this.elemDropDown?.appendChild(confirm);
353
363
  }
354
364
 
355
365
  private createTitleHTML() {
356
366
  if (!this.elemTitle) {
357
367
  this.elemTitle = document.createElement('div');
358
- this.elemTitle.className = getClass('title');
359
- this.elemTopBody.prepend(this.elemTitle);
368
+ let classesTitle = getClass('title');
369
+ if (this.options.isOnlyPlaceholder) {
370
+ classesTitle += ` ${getClass('only-placeholder', true, classesTitle)}`;
371
+ }
372
+ this.elemTitle.className = classesTitle;
373
+ // this.elemTopBody.prepend(this.elemTitle);
374
+ this.elemTopBody.insertBefore(this.elemTitle, this.elemTopBody.childNodes[0]);
360
375
  }
361
376
 
362
377
  const itemsChecked = this.getChecked();
363
378
 
364
379
  this.elemTop.title = '';
380
+
365
381
  const isPlaceholder = !itemsChecked.length;
366
382
  let title:string = this.titlePlaceholder;
367
- if (itemsChecked.length) {
383
+ if (itemsChecked.length && !this.options.isOnlyPlaceholder) {
368
384
  let attrTitle = '';
369
385
  itemsChecked.forEach((item, index) => {
370
386
  if (index !== 0) {
@@ -391,10 +407,15 @@ export class SimpleSelectItemDOM {
391
407
  }
392
408
 
393
409
  this.elemTitle.innerHTML = title;
394
- this.elemTitle.classList.toggle('SimpleSel__title--placeholder', isPlaceholder);
395
- this.elemTitle.classList.toggle('SimpleSel__title--fill', !isPlaceholder);
396
-
397
- this.elemWrap.classList.toggle(getClass('fill', true), !isPlaceholder);
410
+ if (isPlaceholder) {
411
+ this.elemTitle.classList.add('SimpleSel__title--placeholder');
412
+ this.elemTitle.classList.remove('SimpleSel__title--fill');
413
+ this.elemWrap.classList.remove(getClass('fill', true));
414
+ } else {
415
+ this.elemTitle.classList.remove('SimpleSel__title--placeholder');
416
+ this.elemTitle.classList.add('SimpleSel__title--fill');
417
+ this.elemWrap.classList.add(getClass('fill', true));
418
+ }
398
419
  }
399
420
 
400
421
  protected createListHTML() {
@@ -471,11 +492,12 @@ export class SimpleSelectItemDOM {
471
492
  if (isSearchInDropdown) {
472
493
  if (this.elemDropDown) {
473
494
  this.elemInputSearch.className = `${className} ${getClass('dropdown', true, className)}`;
474
- this.elemDropDown.prepend(this.elemInputSearch);
495
+ // this.elemDropDown.prepend(this.elemInputSearch);
496
+ this.elemDropDown.insertBefore(this.elemInputSearch, this.elemDropDown.childNodes[0]);
475
497
  }
476
498
  } else {
477
499
  this.elemInputSearch.className = `${className} ${getClass('top', true, className)}`;
478
- this.elemTop.append(this.elemInputSearch);
500
+ this.elemTop.appendChild(this.elemInputSearch);
479
501
  }
480
502
 
481
503
  this.inputSearchHandler();
package/src/style.css CHANGED
@@ -303,6 +303,9 @@
303
303
  margin-top: 5px;
304
304
  bottom: 0;
305
305
  }
306
+ .SimpleSel__bottom_controls--hide {
307
+ display: none !important;
308
+ }
306
309
  .SimpleSel__bottom_control--hide {
307
310
  display: none;
308
311
  }
@@ -35,6 +35,7 @@ export interface ISimpleSelectOptions {
35
35
  resetAllAfterClose: boolean;
36
36
  isCloneClass: boolean;
37
37
 
38
+ isOnlyPlaceholder: boolean;
38
39
  isUp: boolean;
39
40
 
40
41
  detectNative?: () => boolean;