vgapp 1.5.6 → 1.5.8

package/app/modules/vgselect/js/vgselect.js

@@ -1,9 +1,14 @@
+/**
+ * Описание: кастомный select с синхронизацией исходного поля и выпадающего списка.
+ * Возможности: поиск, группы, дерево, теги, ограничение высоты, AJAX-пагинация, события и освобождение ресурсов.
+ */
 import BaseModule from "../../base-module";
 import {
 	isDisabled,
 	isEmptyObj,
 	mergeDeepObject,
 	normalizeData,
+	transliterate,
 } from "../../../utils/js/functions";
 import {Classes, Manipulator} from "../../../utils/js/dom/manipulator";
 import EventHandler from "../../../utils/js/dom/event";
@@ -30,7 +35,9 @@ const CLASS_NAME_TAG            = 'vg-select-tag';
 const CLASS_NAME_TAG_REMOVE     = 'vg-select-tag-remove';
 const CLASS_NAME_LOAD_MORE      = 'vg-select-load-more';
 const CLASS_NAME_LOADING        = 'vg-select-loading';
-const CLASS_NAME_DROP_UP        = 'drop-up';
+const CLASS_NAME_DROP_UP        = 'drop-up';
+
+const DEFAULT_LIST_MAX_HEIGHT   = 300;
 
 const EVENT_KEY_CHANGE          = `${NAME_KEY}.change`;
 const EVENT_KEY_HIDE            = `${NAME_KEY}.hide`;
@@ -73,11 +80,12 @@ class VGSelect extends BaseModule {
 			autosearch: true,
 			// Dropdown placement behavior:
 			// - none: default CSS positioning (no JS)
-			// - auto: choose top/bottom based on available space in overflow ancestor/viewport
+			// - auto (default): choose top/bottom based on available space in overflow ancestor/viewport
 			// - top: force open upwards
 			// - bottom: force open downwards
-			position: 'none',
-			search: {
+			position: 'auto',
+			height: true,
+			search: {
 				enabled: false,
 				route: '',
 				remote: false,
@@ -105,8 +113,11 @@ class VGSelect extends BaseModule {
 
 		this._observer = null;
 		this._observerTimeout = null;
+		this._searchTimeout = null;
+		this._disposed = false;
 		this._visibilityTransitionId = 0;
-		this._drop = Selectors.find(SELECTOR_DROPDOWN, this._element);
+		this._drop = Selectors.find(SELECTOR_DROPDOWN, this._element);
+		this._applyListMaxHeight();
 		this._searchTerm = '';
 		this._currentPage = 1;
 		this._totalPages = null;
@@ -154,6 +165,7 @@ class VGSelect extends BaseModule {
 	 */
 	static buildListOptions(selector, drop, params = {}) {
 		let list = drop.querySelector(`.${CLASS_NAME_LIST}`);
+		const controls = list ? [...list.querySelectorAll(`.${CLASS_NAME_LOAD_MORE}, .${CLASS_NAME_LOADING}`)] : [];
 		if (!list) {
 			list = document.createElement('ul');
 			Classes.add(list, CLASS_NAME_LIST);
@@ -190,6 +202,7 @@ class VGSelect extends BaseModule {
 			});
 		}
 
+		controls.forEach(control => list.appendChild(control));
 		return list;
 	}
 
@@ -228,9 +241,6 @@ class VGSelect extends BaseModule {
 				li.style.paddingLeft = `${16 + (level * 16)}px`;
 			}
 
-			// Раньше подсветка зависела от "явно выбранных" option (атрибут selected),
-			// из-за этого UI мог показывать placeholder, но DOM считал, что выбрана 1-я опция.
-			// Подсвечиваем по фактическому состоянию option.selected.
 			if (option.selected) {
 				li.classList.add('selected');
 			}
@@ -459,17 +469,16 @@ class VGSelect extends BaseModule {
 		search.appendChild(searchInput);
 		this._drop.insertBefore(search, this._drop.firstChild);
 
-		let searchTimeout;
 		searchInput.addEventListener('input', (e) => {
 			const term = e.target.value.trim();
 			const params = this._params;
 
 			this._callCallback('onSearch', { term });
 			if (params.search.remote && params.search.route) {
+				clearTimeout(this._searchTimeout);
+				this._remoteSearchAbortController?.abort();
 				if (term.length < (params.search.minterm || 1)) return;
-
-				clearTimeout(searchTimeout);
-				searchTimeout = setTimeout(() => {
+				this._searchTimeout = setTimeout(() => {
 					this._fetchRemoteData(term);
 				}, params.search.delay || 300);
 			} else {
@@ -520,7 +529,7 @@ class VGSelect extends BaseModule {
 		if (searchInput) searchInput.focus();
 
 		return this._queueCallback(() => {
-			if (transitionId !== this._visibilityTransitionId || !this._isShown()) return;
+			if (this._disposed || transitionId !== this._visibilityTransitionId || !this._isShown()) return;
 			this._updateDropdownPlacement();
 			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
 			this._triggerEvent(EVENT_KEY_OPEN);
@@ -552,7 +561,7 @@ class VGSelect extends BaseModule {
 		this._element.querySelector(SELECTOR_DATA_TOGGLE).setAttribute('aria-expanded', 'false');
 
 		this._queueCallback(() => {
-			if (transitionId !== this._visibilityTransitionId) return;
+			if (this._disposed || transitionId !== this._visibilityTransitionId) return;
 			this._element.classList.remove(CLASS_NAME_SHOW);
 			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, relatedTarget);
 			this._triggerEvent(EVENT_KEY_CLOSE);
@@ -647,6 +656,7 @@ class VGSelect extends BaseModule {
 	 * Освобождает ресурсы (отключает observer, очищает таймеры)
 	 */
 	dispose() {
+		if (this._disposed) return;
 		this._visibilityTransitionId++;
 		if (this._observer) {
 			this._observer.disconnect();
@@ -654,8 +664,12 @@ class VGSelect extends BaseModule {
 		}
 		clearTimeout(this._observerTimeout);
 		this._observerTimeout = null;
+		clearTimeout(this._searchTimeout);
+		this._remoteSearchAbortController?.abort();
+		if (this._isShown() && 'ontouchstart' in document.documentElement) document.body.style.pointerEvents = '';
 		this._teardownDropdownPlacement();
 		super.dispose();
+		this._disposed = true;
 	}
 
 	_setupDropdownPlacement() {
@@ -675,7 +689,7 @@ class VGSelect extends BaseModule {
 		this._updateDropdownPlacement();
 	}
 
-	_teardownDropdownPlacement() {
+	_teardownDropdownPlacement() {
 		window.removeEventListener('resize', this._boundUpdateDropdownPlacement);
 		window.removeEventListener('scroll', this._boundUpdateDropdownPlacement);
 
@@ -684,16 +698,63 @@ class VGSelect extends BaseModule {
 		}
 		this._positioningScrollParent = null;
 
-		// Reset to stylesheet defaults.
-		this._element.classList.remove(CLASS_NAME_DROP_UP);
-		this._element.style.removeProperty('--vg-select-list-max-height');
-	}
+		// Restore the configured limit after a temporary viewport clamp.
+		this._element.classList.remove(CLASS_NAME_DROP_UP);
+		this._applyListMaxHeight();
+	}
+
+	/**
+	 * Возвращает пользовательское ограничение списка в пикселях.
+	 * true использует стандартные 300px, false снимает ограничение.
+	 * @returns {number|null}
+	 * @private
+	 */
+	_getListMaxHeight() {
+		const raw = this._params?.height;
+		if (raw === false || raw === null) return null;
+		if (raw === true || typeof raw === 'undefined' || raw === '') {
+			const cssHeight = parseFloat(window.getComputedStyle(this._element)
+				.getPropertyValue('--vg-select-list-max-height'));
+			return Number.isFinite(cssHeight) && cssHeight > 0 ? cssHeight : DEFAULT_LIST_MAX_HEIGHT;
+		}
+
+		const height = Number(raw);
+		return Number.isFinite(height) && height > 0 ? height : DEFAULT_LIST_MAX_HEIGHT;
+	}
+
+	/**
+	 * Применяет базовое либо уменьшенное под доступное пространство ограничение.
+	 * @param {number|null} [available=null] - Доступная высота дропа
+	 * @private
+	 */
+	_applyListMaxHeight(available = null) {
+		if (!this._element) return;
+
+		const raw = this._params?.height;
+		const usesStylesheetDefault = raw === true || typeof raw === 'undefined' || raw === '';
+		if (usesStylesheetDefault) {
+			this._element.style.removeProperty('--vg-select-list-max-height');
+			if (!Number.isFinite(available)) return;
+		}
+
+		const configured = this._getListMaxHeight();
+		if (configured === null) {
+			this._element.style.setProperty('--vg-select-list-max-height', 'none');
+			return;
+		}
+
+		const availableHeight = Number.isFinite(available)
+			? Math.max(80, Math.floor(available - 12))
+			: configured;
+		const maxHeight = Math.min(configured, availableHeight);
+		this._element.style.setProperty('--vg-select-list-max-height', `${maxHeight}px`);
+	}
 
 	_getPositionMode() {
 		const raw = this._params?.position;
-		const mode = raw == null ? 'none' : String(raw).trim().toLowerCase();
+		const mode = raw == null ? 'auto' : String(raw).trim().toLowerCase();
 		if (mode === 'auto' || mode === 'top' || mode === 'bottom' || mode === 'none') return mode;
-		return 'none';
+		return 'auto';
 	}
 
 	_getOverflowAncestor(startEl) {
@@ -751,12 +812,8 @@ class VGSelect extends BaseModule {
 
 		const available = openUp ? spaceAbove : spaceBelow;
 
-		// Give the dropdown some breathing room (borders/margins) and clamp.
-		const listMax = Math.max(80, Math.floor(available - 12));
-		if (Number.isFinite(listMax) && listMax > 0) {
-			this._element.style.setProperty('--vg-select-list-max-height', `${listMax}px`);
-		}
-	}
+		this._applyListMaxHeight(available);
+	}
 
 	/**
 	 * Удаляет кастомный UI
@@ -765,8 +822,10 @@ class VGSelect extends BaseModule {
 	static destroy(select) {
 		const container = select.nextElementSibling;
 		if (container && container.classList.contains(CLASS_NAME_CONTAINER)) {
+			VGSelect.getInstance(container)?.dispose();
 			container.remove();
 		}
+		delete select.dataset.inited;
 	}
 
 	/**
@@ -781,6 +840,9 @@ class VGSelect extends BaseModule {
 		const placeholder = select.dataset.placeholder || '';
 		const isMultiple = select.multiple;
 		const instance = VGSelect.getInstance(container);
+		container.querySelectorAll(`.${CLASS_NAME_OPTION}`).forEach(item => {
+			item.classList.toggle('selected', !!select.options[Number(item.dataset.index)]?.selected);
+		});
 
 		if (isMultiple) {
 			const tags = current.querySelector(`.${CLASS_NAME_TAGS}`);
@@ -799,6 +861,10 @@ class VGSelect extends BaseModule {
 
 			if (selected.length === 0) {
 				input.placeholder = placeholder;
+				const label = document.createElement('span');
+				label.className = CLASS_NAME_PLACEHOLDER;
+				label.textContent = placeholder;
+				tags.insertBefore(label, input);
 			} else {
 				input.placeholder = '';
 				selected.forEach(opt => {
@@ -985,13 +1051,14 @@ class VGSelect extends BaseModule {
 
 		const list = this._element.querySelector(SELECTOR_LIST);
 		if (!list) return;
+		if (list.querySelector(SELECTOR_LOAD_MORE_BTN)) return;
 
 		const btn = document.createElement('li');
 		btn.className = CLASS_NAME_LOAD_MORE;
 		btn.style.textAlign = 'center';
 		btn.style.padding = '8px';
 		btn.style.cursor = 'pointer';
-		btn.style.color = '#007bff';
+		btn.style.color = 'var(--vg-primary-color, #007bff)';
 		btn.style.fontSize = '14px';
 		btn.style.fontWeight = '500';
 		btn.textContent = this._params.search.loadMoreText;
@@ -1045,6 +1112,7 @@ class VGSelect extends BaseModule {
 	async _loadNextPage() {
 		const { route, pageParam = 'page', termParam = 'q', perpage = 20 } = this._params.search;
 		const nextPage = this._currentPage + 1;
+		const requestId = this._remoteSearchRequestId;
 
 		const url = new URL(route, window.location.origin);
 		url.searchParams.set(termParam, this._searchTerm);
@@ -1057,7 +1125,9 @@ class VGSelect extends BaseModule {
 
 		try {
 			const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
 			const data = await res.json();
+			if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 
 			if (Array.isArray(data.results)) {
 				VGSelect.addOptions(this._element.previousElementSibling, data, { preserve: true });
@@ -1073,12 +1143,15 @@ class VGSelect extends BaseModule {
 				this._triggerEvent(EVENT_KEY_LOAD_NEXT, { page: this._currentPage, term: this._searchTerm });
 			}
 		} catch (err) {
+			if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 			console.error('VGSelect: Failed to load next page', err);
 			this._triggerEvent(EVENT_KEY_ERROR, { error: 'Pagination fetch failed', term: this._searchTerm });
 			this._hideLoadMoreButton(false); // оставить кнопку при ошибке
 		} finally {
-			this._showLoading(false);
-			this._loading = false;
+			if (!this._disposed && requestId === this._remoteSearchRequestId) {
+				this._showLoading(false);
+				this._loading = false;
+			}
 		}
 	}
 
@@ -1101,6 +1174,7 @@ class VGSelect extends BaseModule {
 		this._searchTerm = term;
 		this._currentPage = 1;
 		this._totalPages = null;
+		this._loading = false;
 
 		// Отменяем предыдущий запрос (если ещё летит)
 		if (this._remoteSearchAbortController) {
@@ -1120,10 +1194,14 @@ class VGSelect extends BaseModule {
 			headers: { 'Content-Type': 'application/json' },
 			signal
 		})
-			.then(res => res.json())
+			.then(res => {
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				return res.json();
+			})
 			.then(data => {
 				// Если прилетел не самый свежий ответ — игнорируем
-				if (requestId !== this._remoteSearchRequestId) return;
+				if (this._disposed || requestId !== this._remoteSearchRequestId) return;
+				if (!Array.isArray(data.results)) throw new Error('Invalid results');
 
 				// Если пользователь уже ввёл другой текст — тоже игнорируем
 				const liveTerm = searchInput ? searchInput.value.trim() : '';
@@ -1173,6 +1251,7 @@ class VGSelect extends BaseModule {
 				}
 			})
 			.catch(err => {
+				if (this._disposed || requestId !== this._remoteSearchRequestId) return;
 				// Abort — нормальная ситуация при быстром вводе
 				if (err && (err.name === 'AbortError')) return;
 
@@ -1182,7 +1261,7 @@ class VGSelect extends BaseModule {
 			})
 			.finally(() => {
 				// Лоадер убираем только для последнего актуального запроса
-				if (requestId === this._remoteSearchRequestId) {
+				if (!this._disposed && requestId === this._remoteSearchRequestId) {
 					this._showLoading(false);
 				}
 			});
@@ -1283,6 +1362,7 @@ class VGSelect extends BaseModule {
 			const drop = container.querySelector(`.${CLASS_NAME_DROPDOWN}`);
 			VGSelect.buildListOptions(select, drop, instance?._params || {});
 			instance?._syncSearch();
+			this.updateUI(select);
 			instance?._triggerEvent(EVENT_KEY_REBUILD);
 		} else {
 			this.updateUI(select);
@@ -1297,17 +1377,25 @@ class VGSelect extends BaseModule {
 	_filterLocalOptions(term) {
 		const list = this._drop.querySelector(`.${CLASS_NAME_LIST}`);
 		const options = list.querySelectorAll(`.${CLASS_NAME_OPTION}`);
-
-		if (!term) {
-			options.forEach(el => el.hidden = false);
-			return;
-		}
-
 		term = term.toLowerCase();
+		const search = [term, transliterate(term), transliterate(term, true)];
+		let results = 0;
 		options.forEach(el => {
 			const text = el.textContent.toLowerCase();
-			el.hidden = !text.includes(term);
+			const option = this._element.previousElementSibling.options[Number(el.dataset.index)];
+			const empty = option?.value === '' && text.trim() === '';
+			const visible = !empty && (!term || search.some(value => text.includes(value)));
+			el.hidden = !visible;
+			el.style.display = visible ? '' : 'none';
+			if (visible) results++;
+		});
+		list.querySelectorAll(`.${CLASS_NAME_OPTGROUP}`).forEach(group => {
+			const visible = [...group.querySelectorAll(`.${CLASS_NAME_OPTION}`)].some(option => !option.hidden);
+			group.hidden = !visible;
+			group.style.display = visible ? '' : 'none';
 		});
+		this._triggerEvent(`${NAME_KEY}.search`, {query: term, results});
+		this._callCallback('onSearch', {query: term, results});
 	}
 }
 

package/app/modules/vgselect/readme.md

@@ -38,11 +38,11 @@
 ```js
 js import VGSelect from './app/modules/vgselect/js/vgselect';
 // Инициализация 
-VGSelect.init(document.getElementById('mySelect'), { 
-    lang: 'ru', 
-    placeholder: 'Выберите значение', 
-	autosearch: true,
-    search: {
+VGSelect.init(document.getElementById('mySelect'), { 
+    lang: 'ru', 
+    placeholder: 'Выберите значение', 
+	autosearch: true,
+    search: {
         enabled: true, 
         remote: true, 
         route: '/api/search', 
@@ -62,11 +62,11 @@ VGSelect.init(document.getElementById('mySelect'), {
 
 | Параметр | Тип | Описание |
 |--------|-----|---------|
-| `lang` | `string` | Язык интерфейса (поддерживается i18n). По умолчанию: `ru` |
-| `placeholder` | `string` | Текст плейсхолдера |
-| `autosearch` | `boolean \| number` | Автоматически включить поиск, если опций больше порога. `true` — порог 7 (по умолчанию), число — собственный порог, `false` — отключить автоматику |
-| `search.enabled` | `boolean` | Включить поле поиска вручную при любом количестве опций |
-| `search.remote` | `boolean` | Поиск через AJAX; при `true` поле поиска включается независимо от количества локальных опций |
+| `lang` | `string` | Язык интерфейса (поддерживается i18n). По умолчанию: `ru` |
+| `placeholder` | `string` | Текст плейсхолдера |
+| `autosearch` | `boolean \| number` | Автоматически включить поиск, если опций больше порога. `true` — порог 7 (по умолчанию), число — собственный порог, `false` — отключить автоматику |
+| `search.enabled` | `boolean` | Включить поле поиска вручную при любом количестве опций |
+| `search.remote` | `boolean` | Поиск через AJAX; при `true` поле поиска включается независимо от количества локальных опций |
 | `search.route` | `string` | URL для удалённого поиска |
 | `search.delay` | `number` | Задержка перед запросом (мс) |
 | `search.minTerm` | `number` | Минимальная длина запроса |
@@ -179,4 +179,4 @@ MIT. Свободно использовать и модифицировать.
 
 📌 *Разработано в рамках фронтенд-системы VG Modules.*
 > 🚀 Автор: VEGAS STUDIO (vegas-dev.com)
-> 📍 Поддерживается в проектах VEGAS
+> 📍 Поддерживается в проектах VEGAS

package/app/modules/vgselect/scss/_variables.scss

@@ -1,11 +1,11 @@
-@use "../../../utils/scss" as vg;
-
-$select-current-map: (
-		background-color: var(--vg-control-bg, #ffffff),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-width: vg.$border-width,
-		border-style: vg.$border-style,
-		border-color: var(--vg-control-border-color, #dddddd),
+@use "../../../utils/scss" as vg;
+
+$select-current-map: (
+		background-color: var(--vg-control-bg, #ffffff),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-style: vg.$border-style,
+		border-color: var(--vg-control-border-color, #dddddd),
 		border-radius: 5px,
 		padding-left: 16px,
 		padding-right: 40px,
@@ -16,69 +16,69 @@ $select-current-map: (
 		z-index: 10,
 ) !default;
 
-$select-placeholder-map: (
-		placehoder-color: var(--vg-text-placeholder-color, rgba(0, 0, 0, .32)),
-		placehoder-font-size: 16px,
-) !default;
+$select-placeholder-map: (
+		placehoder-color: var(--vg-text-placeholder-color, rgba(0, 0, 0, .32)),
+		placehoder-font-size: 16px,
+) !default;
 
 $select-current-svg: '<svg aria-hidden="true" focusable="false" data-prefix="fa-light" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M4 181C7 178 12 176 16 176C20 176 24 177 27 180L224 362L421 180C428 174 438 175 444 181C450 188 449 198 443 204L235 396C229 401 219 401 213 396L5 204C-1 198 -2 188 4 181Z" fill="gray"/></svg>' !default;
 
-$select-dropdown-map: (
-		background-color: var(--vg-control-bg, #ffffff),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-width: vg.$border-width,
-		border-style: vg.$border-style,
-		border-color: var(--vg-control-border-color, #dddddd),
-		border-radius: vg.$border-radius,
-		box-shadow: 0 7px 12px 1px var(--vg-shadow-soft-color, rgba(68, 68, 68, .11)),
+$select-dropdown-map: (
+		background-color: var(--vg-control-bg, #ffffff),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-style: vg.$border-style,
+		border-color: var(--vg-control-border-color, #dddddd),
+		border-radius: vg.$border-radius,
+		box-shadow: 0 7px 12px 1px var(--vg-shadow-soft-color, rgba(68, 68, 68, .11)),
 		z-index: 15,
 ) !default;
 
-$select-list-map: (
-		background-color: transparent,
-		color: var(--vg-text-color, #{vg.$color}),
+$select-list-map: (
+		background-color: transparent,
+		color: var(--vg-text-color, #{vg.$color}),
 		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: 8px,
 		padding-bottom: 8px,
-		border-bottom-width: vg.$border-width,
-		border-bottom-style: vg.$border-style,
-		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
+		border-bottom-width: vg.$border-width,
+		border-bottom-style: vg.$border-style,
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-optgroup-map: (
-		background-color: transparent,
-		color: var(--vg-text-color, #{vg.$color}),
+$select-optgroup-map: (
+		background-color: transparent,
+		color: var(--vg-text-color, #{vg.$color}),
 		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: 8px,
 		padding-bottom: 8px,
-		border-bottom-width: vg.$border-width,
-		border-bottom-style: vg.$border-style,
-		border-bottom-color: var(--vg-border-strong-color, #838383),
+		border-bottom-width: vg.$border-width,
+		border-bottom-style: vg.$border-style,
+		border-bottom-color: var(--vg-border-strong-color, #838383),
 		font-weight: 500,
 ) !default;
 
-$select-list-max-height: 286px !default;
+$select-list-max-height: 300px !default;
 $select-list-scrollbar-width: 6px !default;
-$select-list-scrollbar-bg: var(--vg-surface-muted-bg, #f5f5f5) !default;
-$select-list-scrollbar-thumb: var(--vg-text-muted-color, #999999) !default;
+$select-list-scrollbar-bg: var(--vg-surface-muted-bg, #f5f5f5) !default;
+$select-list-scrollbar-thumb: var(--vg-text-muted-color, #999999) !default;
 
-$select-list-hover-map: (
-		background-color: var(--vg-surface-hover-bg, #f7f7f7),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
+$select-list-hover-map: (
+		background-color: var(--vg-surface-hover-bg, #f7f7f7),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-optgroup-hover-map: (
-		background-color: var(--vg-surface-hover-bg, #f7f7f7),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
+$select-optgroup-hover-map: (
+		background-color: var(--vg-surface-hover-bg, #f7f7f7),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-search-map: (
-		background-color: var(--vg-control-muted-bg, #f2f2f2),
-		color: var(--vg-text-color, #{vg.$color})
+$select-search-map: (
+		background-color: var(--vg-control-muted-bg, #f2f2f2),
+		color: var(--vg-text-color, #{vg.$color})
 ) !default;
 
 $select-tags-map: (
@@ -88,15 +88,15 @@ $select-tags-map: (
 		padding: 2px 0
 ) !default;
 
-$select-tag-map: (
-		gap: 4px,
-		background: var(--vg-primary-color, #0d6efd),
-		color: var(--vg-primary-contrast-color, #ffffff),
+$select-tag-map: (
+		gap: 4px,
+		background: var(--vg-primary-color, #0d6efd),
+		color: var(--vg-primary-contrast-color, #ffffff),
 		padding: 2px 6px,
 		border-radius: 4px,
 		font-size: 14px,
 		remove-width: 12px,
 		remove-height: 12px,
-		remove-stroke: var(--vg-primary-contrast-color, #ffffff),
+		remove-stroke: var(--vg-primary-contrast-color, #ffffff),
 		remove-stroke-width: 2
 ) !default;

package/app/modules/vgselect/scss/vgselect.scss

@@ -11,7 +11,7 @@
 @use "variables" as vars;
 
 select {
-	&.vg-select {
+	&.vg-select[data-inited="true"] {
 		position: absolute;
 		left: 0;
 		top: 0;

package/app/modules/vgsidebar/js/vgsidebar.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: боковые панели VGSidebar с декларативным и программным управлением.
+ * Возможности: четыре стороны экрана, backdrop, прокрутка, URL-хэш, AJAX, события и доступность.
+ */
 import BaseModule from "../../base-module";
 import { isDisabled, isVisible, mergeDeepObject } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
@@ -212,6 +216,7 @@ class VGSidebar extends BaseModule {
 		}
 
 		this._element.classList.add(CLASS_NAME_SHOW);
+		this._element.removeAttribute('aria-hidden');
 		document.body.classList.add(CLASS_NAME_OPEN);
 
 		const completeCallback = () => {
@@ -238,6 +243,7 @@ class VGSidebar extends BaseModule {
 		if (hideEvent.defaultPrevented) return;
 
 		this._element.classList.remove(CLASS_NAME_SHOW);
+		this._element.setAttribute('aria-hidden', 'true');
 		const remainingOpenSidebars = VGSidebar.getOpenSidebars(this._element);
 		if (!remainingOpenSidebars.length) {
 			document.body.classList.remove(CLASS_NAME_OPEN);
@@ -289,12 +295,16 @@ class VGSidebar extends BaseModule {
 	 * @override
 	 */
 	dispose() {
-		super.dispose();
+		if (!this._element) return;
+		EventHandler.off(document, EVENT_KEYS.KEYDOWN_DISMISS, this._keydownHandler);
 		EventHandler.off(this._element, EVENT_KEYS.HIDE);
 		if (this._showPopstateHandler) {
 			EventHandler.off(window, EVENT_KEYS.POPSTATE_DATA_API, this._showPopstateHandler);
 		}
-		this._scrollBar.reset();
+		if (!VGSidebar.getOpenSidebars(this._element).length && !Backdrop.isActive()) {
+			this._scrollBar.reset();
+		}
+		super.dispose();
 	}
 
 	/**
@@ -311,15 +321,16 @@ class VGSidebar extends BaseModule {
 	 * @private
 	 */
 	_addEventListeners() {
-		EventHandler.on(document, EVENT_KEYS.KEYDOWN_DISMISS, (event) => {
-			if (event.key !== 'Escape') return;
+		this._keydownHandler = (event) => {
+			if (event.key !== 'Escape' || !this._isShown()) return;
 
 			if (this._params.keyboard) {
 				this.hide();
 			} else {
 				EventHandler.trigger(this._element, EVENT_KEYS.HIDE_PREVENTED);
 			}
-		});
+		};
+		EventHandler.on(document, EVENT_KEYS.KEYDOWN_DISMISS, this._keydownHandler);
 	}
 }