баги

docs/UI_COMPONENTS.md

@@ -4,45 +4,53 @@
 
 ---
 
-## 1. Стандартные одинарные списки (Custom Select Wrapper)
+## 1. Одинарные списки на React
 
-Этот компонент автоматически "оборачивает" любые стандартные теги `<select>` на всём сайте, превращая их в красивые выпадающие меню. Вам **не нужно** писать сложный HTML, всё работает автоматически!
+В админке используется `frontend/react/shared/ui/CustomSelect.jsx`. Он сохраняет
+стили `.custom-select-wrapper`, нативный `select` для формы и событие `change`,
+но разметкой меню, выбранной подписью и состоянием `disabled` управляет React.
+Глобальный `MutationObserver` из `admin/js/dropdown.js` больше не запускается.
+Его прежнее применение к React-дереву оставляло устаревшие подписи и лишние DOM-узлы.
 
-### Как добавить новый одинарный список:
+```jsx
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';
 
-Просто добавьте обычный тег `<select>` в HTML:
-
-```html
-<div class="form-group">
-    <label for="my-new-select">Выберите опцию</label>
-    <select id="my-new-select">
-        <option value="">Выберите...</option>
-        <option value="1">Опция 1</option>
-        <option value="2">Опция 2</option>
-    </select>
+<div className="form-group">
+    <label htmlFor="my-new-select">Выберите опцию</label>
+    <CustomSelect
+        id="my-new-select"
+        value={selectedId}
+        disabled={loading}
+        onChange={event => setSelectedId(event.target.value)}
+    >
+        <option value="">Все значения</option>
+        {options.map(option => (
+            <option key={option.id} value={option.id}>{option.name}</option>
+        ))}
+    </CustomSelect>
 </div>
 ```
 
-### Как это работает:
-1. В файле `frontend/admin/js/dropdown.js` инициализируется глобальный **`MutationObserver`**.
-2. Как только любой скрипт или загрузка страницы добавляет `<select>` в DOM, скрипт автоматически:
-   - Скрывает оригинальный `<select>` (но оставляет его доступным из JS!).
-   - Рисует поверх него красивый `div.custom-select-wrapper` с нужным текстом, иконкой-шевроном и эффектом размытия фона.
-   - Синхронизирует состояния (если вы выберете элемент в кастомном UI, он автоматически изменит `select.value` и кинет событие `change`).
-
-### Динамическое обновление списка (через JS):
-Если вы подгружаете список с API, просто обновите `innerHTML` **нативного селекта**, как обычно:
-
-```javascript
-const select = document.getElementById('my-new-select');
-select.innerHTML = '<option value="99">Новое значение с API</option>';
-```
-**Магия!** Экземпляр `CustomSelect` использует свой собственный внутренний `MutationObserver` для отслеживания изменений `<option>`, поэтому он **автоматически перестроит красивый кастомный выпадающий список**. Никаких дополнительных вызовов для перерисовки не требуется.
+Список обновляется через `options` и `value`, без `innerHTML`. Пустое значение
+можно выбрать для сброса фильтра; недоступные пункты помечаются `disabled`.
+При количестве вариантов больше шести появляется поиск. Поддерживаются стрелки,
+Home/End, Escape, закрытие снаружи и снятие обработчиков при размонтировании.
+Для обязательного поля передайте `required`: пустое значение блокирует отправку,
+показывает «Выберите значение» и переводит фокус на видимую кнопку селекта.
+Ошибка связана с кнопкой через `aria-describedby` и снимается после выбора.
+Для поиска по API используется отдельный `AsyncCombobox`.
 
 ---
 
 ## 2. Множественный выбор (Multi-Select с чекбоксами)
 
+На React-страницах меню и закрытие снаружи управляются состоянием компонентов
+(`EquipmentMultiSelect` в `ClassroomsTab.jsx`, `WorkloadMultiSelect` в
+`AuditoriumWorkloadTab.jsx` и аналогичные компоненты остальных вкладок).
+Глобальные `initMultiSelect` и `closeAllDropdownsOnOutsideClick` к React-дереву
+не применяются. HTML-примеры ниже описывают прежний контракт CSS-классов;
+новые элементы следует создавать в JSX и управлять ими через React-состояние.
+
 Этот UI-компонент позволяет выбирать сразу несколько элементов из выпадающего списка. Он включает в себя кастомные красивые галочки (checkmarks) с неоновой подсветкой и кастомный скроллбар.
 
 Этот компонент требует написания определённой HTML-структуры, так как нативного тега `select multiple` с похожей функциональностью не существует.