simp-select 1.2.3 → 1.2.5

package/src/simpleSelectItemDOM.ts

@@ -3,6 +3,7 @@ import {
   cloneObj, compareObj,
   createButton, decodeHtmlEntities,
   getClass,
+  getNativeOptions,
   ifTrueDataAttr,
   removeExtraSpaces,
   toCamelCase,
@@ -332,10 +333,10 @@ export class SimpleSelectItemDOM {
     }
     resClassesWrap += ` ${this.isMulti ? getClass('multi', true) : getClass('single', true)}`;
     if (this.options.isLabelMode) {
-      resClassesWrap += ' ' + getClass('label_mode', true);
+      resClassesWrap += ` ${getClass('label_mode', true)}`;
     }
     this.elemWrap.className = resClassesWrap;
-    this.elemWrap.dataset.countAll = this.$select.options.length.toString();
+    this.elemWrap.dataset.countAll = getNativeOptions(this.$select).length.toString();
 
     this.elemTop.className = getClass('top');
 
@@ -430,7 +431,16 @@ export class SimpleSelectItemDOM {
     }
     /** end MultiSelect debounce animate status */
 
+    const classOpened = getClass('opened', true);
     this.elemDropDownWrap.append(this.elemDropDown);
+    this.elemDropDownWrap.addEventListener('transitionend', (e) => {
+      if (e.propertyName === 'max-height') {
+        if (this.state.getState('isOpen')) {
+          this.elemWrap.classList.add(classOpened);
+        }
+      }
+    });
+
     this.elemWrap.appendChild(this.elemDropDownWrap);
     this.elemDropDown.appendChild(this.elemListBody);
 
@@ -501,7 +511,6 @@ export class SimpleSelectItemDOM {
       this.elemAlwaysLabel = document.createElement('div');
       let classesTitle = getClass('label');
       if (this.options.isOnlyPlaceholder) {
-        alert('111');
         classesTitle += ` ${getClass('always-placeholder', true, classesTitle)}`;
       }
       this.elemAlwaysLabel.className = classesTitle;
@@ -553,7 +562,7 @@ export class SimpleSelectItemDOM {
       if (itemsChecked.length > maxShow) {
         title = `${this.options.locale.selected} ${itemsChecked.length}`;
 
-        if (this.$select.querySelectorAll('option').length === itemsChecked.length) {
+        if (getNativeOptions(this.$select).length === itemsChecked.length) {
           title += ` (${this.options.locale.all})`;
         }
       } else if (attrTitle) {
@@ -563,8 +572,6 @@ export class SimpleSelectItemDOM {
 
     this.elemTitle.innerHTML = title;
 
-
-
     if (isPlaceholder) {
       this.elemTitle.classList.add('SimpleSel__title--placeholder');
       this.elemTitle.classList.remove('SimpleSel__title--fill');
@@ -612,6 +619,8 @@ export class SimpleSelectItemDOM {
     let countCheckedFullItems = 0;
 
     const items = isFilter ? this.filterList() : this.state.getState('items');
+    // один раз на весь проход: копирование списка option заметно на больших select
+    const nativeOptions = getNativeOptions(this.$select);
     const dataForCompare: IDataForCompareOptions[] = [];
     items.forEach((group:IOptionItems) => {
       group.items.forEach((i) => {
@@ -625,7 +634,7 @@ export class SimpleSelectItemDOM {
       if (!group.isGroup) {
         const {
           result, countShow, countChecked, countCheckedFull,
-        } = this.createLi(group);
+        } = this.createLi(group, nativeOptions);
         resBodyList += result;
         countShowItem += countShow;
         countCheckedItems += countChecked;
@@ -633,7 +642,7 @@ export class SimpleSelectItemDOM {
       } else {
         const {
           result, countShow, countChecked, countCheckedFull,
-        } = this.createLi(group);
+        } = this.createLi(group, nativeOptions);
         let groupAttrs = `data-count-show="${countShow}" `;
         groupAttrs += `data-count-checked="${countChecked}" `;
         let classGroup = getClass('group_items');
@@ -661,7 +670,7 @@ export class SimpleSelectItemDOM {
     this.elemWrap.dataset.countChecked = countCheckedItems.toString();
     this.elemWrap.dataset.countCheckedFull = countCheckedFullItems.toString();
     if (this.isMulti) {
-      this.elemWrap.dataset.checkAllMulti = (this.$select.options.length === countCheckedItems) ? 'yes' : 'no';
+      this.elemWrap.dataset.checkAllMulti = (nativeOptions.length === countCheckedItems) ? 'yes' : 'no';
     }
 
     resBodyList = removeExtraSpaces(resBodyList);
@@ -739,7 +748,7 @@ export class SimpleSelectItemDOM {
     return res;
   }
 
-  private createLi(data: IOptionItems): ICreateLiReturn {
+  private createLi(data: IOptionItems, nativeOptions: HTMLOptionElement[]): ICreateLiReturn {
     let result = '';
     let countShow = 0;
     let countChecked = 0;
@@ -805,7 +814,7 @@ export class SimpleSelectItemDOM {
       }
 
       result += `<li  class="${classLi}" ${dataAttr}>`;
-      const createLiBodyRes = this.createLiBody(option, this.$select.options[option.position]);
+      const createLiBodyRes = this.createLiBody(option, this.findNativeOption(option, nativeOptions));
       result += typeof createLiBodyRes === 'string' ? createLiBodyRes : createLiBodyRes.outerHTML;
       result += '</li>';
     });
@@ -817,7 +826,30 @@ export class SimpleSelectItemDOM {
     };
   }
 
-  private createLiBody(option: IOptionItem, optionNative: HTMLOptionElement): HTMLElement | string {
+  // нативного option может не быть на своей позиции: DOM select могли поменять после построения списка
+  // (авто-перевод браузера, внешний скрипт) - тогда ищем по value
+  private findNativeOption(option: IOptionItem, nativeOptions: HTMLOptionElement[]): HTMLOptionElement | null {
+    const byPosition = nativeOptions[option.position];
+    if (byPosition && byPosition.getAttribute('value') === option.value) {
+      return byPosition;
+    }
+    return nativeOptions.find((native) => native.getAttribute('value') === option.value) || byPosition || null;
+  }
+
+  // запасной option, чтобы changeBodyLi всегда получал элемент, даже если нативный не нашёлся
+  private createFakeOption(option: IOptionItem): HTMLOptionElement {
+    const fake = document.createElement('option');
+    if (option.value !== null) {
+      fake.value = option.value;
+    }
+    fake.innerHTML = option.title;
+    fake.selected = option.checked;
+    fake.disabled = option.disabled;
+
+    return fake;
+  }
+
+  private createLiBody(option: IOptionItem, optionNative: HTMLOptionElement | null): HTMLElement | string {
     const item = document.createElement('div');
 
     item.className = getClass('list_item_body');
@@ -831,7 +863,7 @@ export class SimpleSelectItemDOM {
       res += this.bodyLiHTMLBeforeFromSelect;
     }
 
-    if (optionNative.hasAttribute('data-simple-html-before')) {
+    if (optionNative && optionNative.hasAttribute('data-simple-html-before')) {
       res += optionNative.getAttribute('data-simple-html-before');
     }
 
@@ -839,14 +871,14 @@ export class SimpleSelectItemDOM {
     if (this.bodyLiHTMLAfterFromSelect) {
       res += this.bodyLiHTMLAfterFromSelect;
     }
-    if (optionNative.hasAttribute('data-simple-html-after')) {
+    if (optionNative && optionNative.hasAttribute('data-simple-html-after')) {
       res += optionNative.getAttribute('data-simple-html-after');
     }
 
     item.innerHTML = res;
 
     if (this.options.changeBodyLi) {
-      return this.options.changeBodyLi(item, optionNative);
+      return this.options.changeBodyLi(item, optionNative || this.createFakeOption(option));
     }
     return item;
   }

package/src/style.css

@@ -49,6 +49,16 @@
 .SimpleSel * {
 	box-sizing: border-box;
 }
+
+/*
+ * Авто-перевод браузера оборачивает текст в <font> и пересоздаёт эти узлы.
+ * Если узел, получивший mousedown, удалён из DOM до mouseup, Chrome не генерирует click
+ * и селект не открывается. Делегирование не помогает: события click нет вообще.
+ * Убираем <font> из hit-testing, чтобы целью события был стабильный родитель
+ */
+.SimpleSel font {
+	pointer-events: none;
+}
 .SimpleSel :after,
 .SimpleSel :before {
 	box-sizing: border-box;
@@ -111,6 +121,7 @@
 .SimpleSel__list_item_icon,
 .SimpleSel__reset_all__icon {
 	width: var(--simpS_size_check);
+	min-width: var(--simpS_size_check);
 	height: var(--simpS_size_check);
 	position: relative;
 	border: 1px solid currentColor;
@@ -219,7 +230,6 @@
 	opacity: 0;
 	visibility: hidden;
 	overflow: hidden;
-	overflow-y: auto;
 	position: absolute;
 	transition: .25s all;
 	width: 100%;
@@ -228,6 +238,7 @@
 	border-radius: var(--simpS_radius);
 	background-color: var(--simpS_dropdownBg);
 	overscroll-behavior: contain;
+
 }
 .SimpleSel--body-always_open {
 	max-height: none;
@@ -235,6 +246,7 @@
 	top: auto;
 	opacity: 1;
 	visibility: visible;
+	overflow-y: auto;
 }
 
 .SimpleSel:not(.SimpleSel--up) .SimpleSel--multi {
@@ -247,6 +259,9 @@
 	margin-bottom: 2px;
 }
 
+.SimpleSel--opened .SimpleSel__body {
+	overflow-y: auto;
+}
 .SimpleSel--open .SimpleSel__body {
 	max-height: 230px;
 	opacity: 1;

package/src/utils/simpleSelection.utils.ts

@@ -48,15 +48,32 @@ export function triggerInputEvent(element: HTMLElement, type = 'change') {
   }
 }
 
-export const getCreateItem = (option: HTMLOptionElement, index: number) => ({
-  id: (index + 1).toString(),
-  position: option.index,
-  title: option.innerHTML,
-  value: option.getAttribute('value'),
-  checked: option.selected,
-  disabled: option.disabled,
-  isShowFilter: true,
-});
+// select.options может не содержать option, если браузер (авто-перевод страницы) обернул их в свой тег.
+// querySelectorAll находит option в любом случае, порядок тот же (порядок в документе)
+export const getNativeOptions = (select: HTMLSelectElement): HTMLOptionElement[] => Array.from(select.querySelectorAll('option'));
+
+export const getOptionsPositions = (select: HTMLSelectElement): Map<HTMLOptionElement, number> => {
+  const positions = new Map<HTMLOptionElement, number>();
+  getNativeOptions(select).forEach((option, ind) => {
+    positions.set(option, ind);
+  });
+  return positions;
+};
+
+export const getCreateItem = (option: HTMLOptionElement, index: number, positions?: Map<HTMLOptionElement, number>) => {
+  const position = positions ? positions.get(option) : undefined;
+
+  return {
+    id: (index + 1).toString(),
+    // option.index возвращает 0, если option вне списка опций select (обёрнут другим тегом)
+    position: position === undefined ? option.index : position,
+    title: option.innerHTML,
+    value: option.getAttribute('value'),
+    checked: option.selected,
+    disabled: option.disabled,
+    isShowFilter: true,
+  };
+};
 
 export const createOptionItems = (isGroup: boolean, idGroup: string, items:IOptionItem[], isShowFilter = true): IOptionItems => {
   return {
@@ -67,20 +84,25 @@ export const createOptionItems = (isGroup: boolean, idGroup: string, items:IOpti
   };
 };
 
-export const getCreateListItem = (item: HTMLSelectElement | HTMLOptGroupElement | HTMLOptionElement, idGroup: string, isGroup: boolean) => {
+export const getCreateListItem = (
+  item: HTMLSelectElement | HTMLOptGroupElement | HTMLOptionElement,
+  idGroup: string,
+  isGroup: boolean,
+  positions?: Map<HTMLOptionElement, number>,
+) => {
   // Если есть группы, но может быть option вне группы
   if (item instanceof HTMLOptionElement) {
     return createOptionItems(
       isGroup,
       idGroup,
-      [getCreateItem(item, 1)],
+      [getCreateItem(item, 1, positions)],
       true,
     );
   }
   const options = item.querySelectorAll('option');
   const items:IOptionItem[] = [];
   options.forEach((option, ind) => {
-    items.push(getCreateItem(option, ind));
+    items.push(getCreateItem(option, ind, positions));
   });
   const newItem: IOptionItems = createOptionItems(
     isGroup,