From 25c1188c3292c9e0d2ac401964a6e79ce35f0a70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=93=D0=BE=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=B5=D1=86=D0=BA=D0=B8=D0=B9?=
 <gorodetskiy.timur@tnsu.kz>
Date: Mon, 21 Sep 2026 09:29:34 +0500
Subject: [PATCH] =?UTF-8?q?fix:=20=D0=B7=D0=B0=D1=8F=D0=B2=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D1=80=D0=B5=D0=BA=D1=80=D1=83=D1=82=D0=B8=D0=BD=D0=B3=D0=B0=20?=
 =?UTF-8?q?=D0=BD=D0=B5=20=D0=B4=D0=B0=D0=B2=D0=B0=D0=BB=D0=B8=20=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D1=82=D1=8C=20=D0=B1=D0=B5?=
 =?UTF-8?q?=D0=B7=20=D0=B2=D1=8B=D1=8C=D0=B1=D1=80=D0=B0=D0=BD=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B3=D0=BE=20=D0=BF=D1=80=D0=BE=D0=B5=D0=BA=D1=82=D0=B0,=20?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=BF=D1=80=D0=BE=D0=BF=D1=83=D1=81=D0=BA=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B8=20=D0=BF=D1=83=D1=81=D1=82=D1=83=D1=8E=20=D0=BC?=
 =?UTF-8?q?=D0=B0=D1=82=D1=80=D0=B8=D1=86=D1=83=20=D1=81=D0=BE=D0=B3=D0=BB?=
 =?UTF-8?q?=D0=B0=D1=81=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RecruitingHire/RecruitingHireForm.tsx     |  28 +++-
 .../sections/ApplicationSection.tsx           |   2 +-
 .../sections/CandidateSection.tsx             |  11 +-
 .../RecruitingSelectionForm.tsx               |  27 +++-
 .../sections/ApplicationSection.tsx           |   2 +-
 .../sections/VacancySection.tsx               |  11 +-
 .../requestPortal/shared/dictionary/index.ts  |   4 +
 .../shared/dictionary/models/IPosition.ts     |  14 ++
 .../shared/dictionary/positions.service.ts    |  27 ++++
 .../dictionary/ui/PositionPicker.module.scss  |  90 ++++++++++++
 .../shared/dictionary/ui/PositionPicker.tsx   | 136 ++++++++++++++++++
 11 files changed, 342 insertions(+), 10 deletions(-)
 create mode 100644 src/webparts/requestPortal/shared/dictionary/models/IPosition.ts
 create mode 100644 src/webparts/requestPortal/shared/dictionary/positions.service.ts
 create mode 100644 src/webparts/requestPortal/shared/dictionary/ui/PositionPicker.module.scss
 create mode 100644 src/webparts/requestPortal/shared/dictionary/ui/PositionPicker.tsx

diff --git a/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireForm.tsx b/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireForm.tsx
index 1ed32c8..5af07e9 100644
--- a/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireForm.tsx
+++ b/src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireForm.tsx
@@ -196,10 +196,20 @@ const RecruitingHireForm: React.FC<IRequestFormProps> = ({
 
   // При совмещении (2+ компании в «Организация») нужно явно указать, какая из них основная.
   const mainCompanyMissing = data.Companies.length >= 2 && !data.MainCompanyId;
-  const isValid = data.HireCandidateName.trim().length > 0 && data.Position.trim().length > 0 && !mainCompanyMissing;
+  // ProjectId обязателен (а не просто текст Project): маршрут резолвится ПО
+  // ПРОЕКТУ (ByProject, см. projectId выше), и без выбранного из списка
+  // варианта (id) approval-route вернёт 404 — форма должна не пускать на
+  // отправку раньше, чем выяснится, что маршрут вообще некому строить (баг:
+  // раньше это не проверялось, и заявка молча уходила на согласование с
+  // пустой матрицей).
+  const isValid =
+    data.HireCandidateName.trim().length > 0 &&
+    data.Position.trim().length > 0 &&
+    !!data.ProjectId &&
+    !mainCompanyMissing;
   const validate = (): string | undefined => {
     if (mainCompanyMissing) return 'Выбрано несколько организаций — укажите, какая из них основное место работы.';
-    if (!isValid) return 'Заполните обязательные поля: Ф.И.О. кандидата, Должность.';
+    if (!isValid) return 'Заполните обязательные поля: Ф.И.О. кандидата, Должность, Проект (выберите вариант из списка).';
     if (requestTypeIdState.error) return `Не удалось определить тип заявки: ${requestTypeIdState.error}`;
     if (!requestTypeId) return 'Тип заявки ещё определяется — подождите немного и повторите.';
     return undefined;
@@ -296,6 +306,20 @@ const RecruitingHireForm: React.FC<IRequestFormProps> = ({
   const validateSubmit = (): string | undefined => {
     const formError = validate();
     if (formError) return formError;
+    if (matrix.error) {
+      return `Не удалось определить маршрут согласования: ${matrix.error}. Попробуйте ещё раз или обратитесь к администратору.`;
+    }
+    if (matrix.loading) {
+      return 'Маршрут согласования ещё формируется — подождите немного и повторите.';
+    }
+    // Матрица пуста (не только «есть шаг без человека») — раньше это молча
+    // пропускалось (findUnassignedStep на пустом массиве ошибки не даёт), и
+    // заявка уходила на согласование без единого согласующего. У фазы
+    // исполнения (executors) пустой список — нормальное состояние (не у
+    // всех маршрутов есть шаги исполнения), там эта проверка не нужна.
+    if (matrix.rows.length === 0) {
+      return 'Маршрут согласования не найден для выбранного проекта — обратитесь к администратору.';
+    }
     const unassignedApproverError = unassignedStepMessage(
       matrix.rows,
       (r) => `Шаг ${r.order} маршрута согласования («${r.position || 'без должности'}») без назначенного человека — выберите согласующего или удалите шаг.`
diff --git a/src/webparts/requestPortal/forms/RecruitingHire/sections/ApplicationSection.tsx b/src/webparts/requestPortal/forms/RecruitingHire/sections/ApplicationSection.tsx
index 0ace1f6..4b4a817 100644
--- a/src/webparts/requestPortal/forms/RecruitingHire/sections/ApplicationSection.tsx
+++ b/src/webparts/requestPortal/forms/RecruitingHire/sections/ApplicationSection.tsx
@@ -49,7 +49,7 @@ export const ApplicationSection: React.FC<ISectionProps> = ({ data, set, context
         shares={data.CompanyShares}
         onSharesChange={(v) => set('CompanyShares', v)}
       />
-      <FormField label="1.2 Проект" htmlFor="Project" full>
+      <FormField label="1.2 Проект" htmlFor="Project" required full>
         <ProjectPicker
           context={context}
           id="Project"
diff --git a/src/webparts/requestPortal/forms/RecruitingHire/sections/CandidateSection.tsx b/src/webparts/requestPortal/forms/RecruitingHire/sections/CandidateSection.tsx
index e244a74..93057d6 100644
--- a/src/webparts/requestPortal/forms/RecruitingHire/sections/CandidateSection.tsx
+++ b/src/webparts/requestPortal/forms/RecruitingHire/sections/CandidateSection.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { CollapseSection, FormField, TextInput } from '../../../shared/ui';
+import { PositionPicker } from '../../../shared/dictionary';
 import { ISectionProps } from '../model';
 
-export const CandidateSection: React.FC<ISectionProps> = ({ data, set }) => (
+export const CandidateSection: React.FC<ISectionProps> = ({ data, set, context }) => (
   <CollapseSection title="2. Кандидат" icon="people">
     <FormField label="2.1 Ф.И.О. кандидата" htmlFor="HireCandidateName" required full>
       <TextInput id="HireCandidateName" value={data.HireCandidateName} onChange={(v) => set('HireCandidateName', v)} />
@@ -11,7 +12,13 @@ export const CandidateSection: React.FC<ISectionProps> = ({ data, set }) => (
       <TextInput id="HireHireDate" type="date" value={data.HireHireDate} onChange={(v) => set('HireHireDate', v)} />
     </FormField>
     <FormField label="2.3 Должность" htmlFor="Position" required>
-      <TextInput id="Position" value={data.Position} onChange={(v) => set('Position', v)} />
+      <PositionPicker
+        context={context}
+        id="Position"
+        value={data.Position}
+        onChange={(v) => set('Position', v)}
+        placeholder="Начните вводить название должности…"
+      />
     </FormField>
     <FormField label="2.4 Вид работ" htmlFor="WorkKind">
       <TextInput id="WorkKind" value={data.WorkKind} onChange={(v) => set('WorkKind', v)} />
diff --git a/src/webparts/requestPortal/forms/RecruitingSelection/RecruitingSelectionForm.tsx b/src/webparts/requestPortal/forms/RecruitingSelection/RecruitingSelectionForm.tsx
index 5c8c744..7c22e33 100644
--- a/src/webparts/requestPortal/forms/RecruitingSelection/RecruitingSelectionForm.tsx
+++ b/src/webparts/requestPortal/forms/RecruitingSelection/RecruitingSelectionForm.tsx
@@ -207,9 +207,23 @@ const RecruitingSelectionForm: React.FC<IRequestFormProps> = ({
     (login) => approval.getJobTitle(login)
   );
 
-  const isValid = !!(data.Responsible && data.DepartmentName.trim() && data.Position.trim() && data.Residence);
+  // ObjectProjectId обязателен (а не просто текст ObjectProject): маршрут
+  // согласования резолвится ПО ПРОЕКТУ (ByProject, см. projectId выше), и без
+  // выбранного из списка варианта (id) approval-route вернёт 404 — форма
+  // должна не пускать на отправку раньше, чем выяснится, что маршрут вообще
+  // некому строить (баг: раньше это не проверялось, и заявка молча уходила
+  // на согласование с пустой матрицей).
+  const isValid = !!(
+    data.Responsible &&
+    data.DepartmentName.trim() &&
+    data.Position.trim() &&
+    data.Residence &&
+    data.ObjectProjectId
+  );
   const validate = (): string | undefined => {
-    if (!isValid) return 'Заполните обязательные поля: ответственный за подачу, название отдела, должность, проживание.';
+    if (!isValid) {
+      return 'Заполните обязательные поля: ответственный за подачу, название отдела, должность, проживание, объект/проект (выберите вариант из списка).';
+    }
     if (requestTypeIdState.error) return `Не удалось определить тип заявки: ${requestTypeIdState.error}`;
     if (!requestTypeId) return 'Тип заявки ещё определяется — подождите немного и повторите.';
     return undefined;
@@ -295,6 +309,15 @@ const RecruitingSelectionForm: React.FC<IRequestFormProps> = ({
     if (matrix.error) {
       return `Не удалось определить маршрут согласования: ${matrix.error}. Попробуйте ещё раз или обратитесь к администратору.`;
     }
+    if (matrix.loading) {
+      return 'Маршрут согласования ещё формируется — подождите немного и повторите.';
+    }
+    // Матрица пуста (не только «есть шаг без человека») — раньше это молча
+    // пропускалось (findUnassignedStep на пустом массиве ошибки не даёт), и
+    // заявка уходила на согласование без единого согласующего.
+    if (matrix.rows.length === 0) {
+      return 'Маршрут согласования не найден для выбранного объекта/проекта — обратитесь к администратору.';
+    }
     const unassignedError = unassignedStepMessage(
       matrix.rows,
       (r) => `Шаг ${r.order} маршрута согласования («${r.position || 'без должности'}») без назначенного человека — выберите согласующего или удалите шаг.`
diff --git a/src/webparts/requestPortal/forms/RecruitingSelection/sections/ApplicationSection.tsx b/src/webparts/requestPortal/forms/RecruitingSelection/sections/ApplicationSection.tsx
index 025ceb8..8f1a63b 100644
--- a/src/webparts/requestPortal/forms/RecruitingSelection/sections/ApplicationSection.tsx
+++ b/src/webparts/requestPortal/forms/RecruitingSelection/sections/ApplicationSection.tsx
@@ -76,7 +76,7 @@ export const ApplicationSection: React.FC<ISectionProps> = ({ data, set, context
           placeholder="Начните вводить название организации…"
         />
       </FormField>
-      <FormField label="1.7 Объект/Проект" htmlFor="ObjectProject" full>
+      <FormField label="1.7 Объект/Проект" htmlFor="ObjectProject" required full>
         <ProjectPicker
           context={context}
           id="ObjectProject"
diff --git a/src/webparts/requestPortal/forms/RecruitingSelection/sections/VacancySection.tsx b/src/webparts/requestPortal/forms/RecruitingSelection/sections/VacancySection.tsx
index ca08ee2..20ce050 100644
--- a/src/webparts/requestPortal/forms/RecruitingSelection/sections/VacancySection.tsx
+++ b/src/webparts/requestPortal/forms/RecruitingSelection/sections/VacancySection.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { CollapseSection, FormField, TextInput, TextArea, Select } from '../../../shared/ui';
+import { PositionPicker } from '../../../shared/dictionary';
 import { LanguagesField } from './LanguagesField';
 import { MultiChoiceField } from './MultiChoiceField';
 import {
@@ -12,10 +13,16 @@ import {
   OTHER_VALUE
 } from '../model';
 
-export const VacancySection: React.FC<ISectionProps> = ({ data, set }) => (
+export const VacancySection: React.FC<ISectionProps> = ({ data, set, context }) => (
   <CollapseSection title="3. Вакансия" icon="document">
     <FormField label="3.1 Должность" htmlFor="Position" required full>
-      <TextInput id="Position" value={data.Position} onChange={(v) => set('Position', v)} />
+      <PositionPicker
+        context={context}
+        id="Position"
+        value={data.Position}
+        onChange={(v) => set('Position', v)}
+        placeholder="Начните вводить название должности…"
+      />
     </FormField>
     <FormField label="3.2 Характер занятости" htmlFor="EmploymentType">
       <Select
diff --git a/src/webparts/requestPortal/shared/dictionary/index.ts b/src/webparts/requestPortal/shared/dictionary/index.ts
index a7a16e4..a41afa2 100644
--- a/src/webparts/requestPortal/shared/dictionary/index.ts
+++ b/src/webparts/requestPortal/shared/dictionary/index.ts
@@ -14,6 +14,10 @@ export { getEmployeeOrganizations, formatEmployeeOrganizations } from './employe
 export type { IEmployeeOrganization } from './models/IEmployeeOrganization';
 export { getNomenclature } from './nomenclature.service';
 export type { INomenclatureRow } from './models/INomenclatureRow';
+export { searchPositions } from './positions.service';
+export type { IPosition } from './models/IPosition';
+export { PositionPicker } from './ui/PositionPicker';
+export type { IPositionPickerProps } from './ui/PositionPicker';
 export {
   directorPositionFor,
   getEmployeeEmailByPosition,
diff --git a/src/webparts/requestPortal/shared/dictionary/models/IPosition.ts b/src/webparts/requestPortal/shared/dictionary/models/IPosition.ts
new file mode 100644
index 0000000..93b06f0
--- /dev/null
+++ b/src/webparts/requestPortal/shared/dictionary/models/IPosition.ts
@@ -0,0 +1,14 @@
+// GET https://api.tnsu.kz/Dictionary/Positions?search=&page=&pageSize= →
+// { total, page, pageSize, items: IPosition[] }. Справочник большой (878+
+// записей), поэтому ищем на сервере через search, а не тянем всё разом.
+export interface IPosition {
+  id: string;
+  position: string;
+}
+
+export interface IPositionListResponse {
+  total: number;
+  page: number;
+  pageSize: number;
+  items: IPosition[];
+}
diff --git a/src/webparts/requestPortal/shared/dictionary/positions.service.ts b/src/webparts/requestPortal/shared/dictionary/positions.service.ts
new file mode 100644
index 0000000..c8d1b67
--- /dev/null
+++ b/src/webparts/requestPortal/shared/dictionary/positions.service.ts
@@ -0,0 +1,27 @@
+import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+import { APPROVAL_API_CLIENT_ID, DICTIONARY_API_BASE_URL } from '../config';
+import { IPosition, IPositionListResponse } from './models/IPosition';
+
+/**
+ * GET /Dictionary/Positions?search=...&page=1&pageSize=... — справочник
+ * должностей (878+ записей). В отличие от /Project (см. projects.service),
+ * весь список разом не тянем и не кэшируем — ищем на сервере по мере ввода
+ * (см. PositionPicker), иначе каждое открытие формы качало бы сотни записей.
+ */
+export async function searchPositions(
+  context: WebPartContext,
+  search: string,
+  pageSize: number
+): Promise<IPosition[]> {
+  const client = await context.aadHttpClientFactory.getClient(APPROVAL_API_CLIENT_ID);
+  const response: HttpClientResponse = await client.get(
+    `${DICTIONARY_API_BASE_URL}/Dictionary/Positions?search=${encodeURIComponent(search)}&page=1&pageSize=${pageSize}`,
+    AadHttpClient.configurations.v1
+  );
+  if (!response.ok) {
+    throw new Error(`Dictionary/Positions: ${response.status} ${response.statusText}`);
+  }
+  const body: IPositionListResponse = await response.json();
+  return body.items ?? [];
+}
diff --git a/src/webparts/requestPortal/shared/dictionary/ui/PositionPicker.module.scss b/src/webparts/requestPortal/shared/dictionary/ui/PositionPicker.module.scss
new file mode 100644
index 0000000..83dd5cd
--- /dev/null
+++ b/src/webparts/requestPortal/shared/dictionary/ui/PositionPicker.module.scss
@@ -0,0 +1,90 @@
+@import '../../../../../styles/design-tokens';
+
+.wrap {
+  position: relative;
+}
+
+.input {
+  box-sizing: border-box;
+  width: 100%;
+  // справа место под крестик-очистку
+  padding: 11px 36px 11px 13px;
+  border: 1px solid $gray-300;
+  border-radius: $r-sm;
+  background: $white;
+  font-family: $font-sans;
+  font-size: 13.5px;
+  color: $gray-900;
+  transition: .18s;
+
+  @include input-focus-gold;
+  @include readonly-field(':read-only');
+
+  &::placeholder {
+    color: $gray-400;
+  }
+}
+
+.clear {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: $r-sm;
+  background: transparent;
+  color: $gray-400;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: .15s;
+
+  &:hover {
+    background: $gray-100;
+    color: $gray-700;
+  }
+}
+
+.list {
+  position: absolute;
+  z-index: 20;
+  left: 0;
+  right: 0;
+  margin-top: $sp-1;
+  max-height: 260px;
+  overflow-y: auto;
+  background: $white;
+  border: 1px solid $gray-200;
+  border-radius: $r-sm;
+  box-shadow: $sh-2;
+}
+
+.item {
+  display: flex;
+  width: 100%;
+  padding: 9px 12px;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  font-family: $font-sans;
+  font-size: $fs-sm;
+  color: $gray-900;
+  cursor: pointer;
+
+  &:hover {
+    background: $navy-50;
+  }
+}
+
+.status {
+  padding: 9px 12px;
+  font-family: $font-sans;
+  font-size: $fs-sm;
+  color: $gray-500;
+}
diff --git a/src/webparts/requestPortal/shared/dictionary/ui/PositionPicker.tsx b/src/webparts/requestPortal/shared/dictionary/ui/PositionPicker.tsx
new file mode 100644
index 0000000..8932eca
--- /dev/null
+++ b/src/webparts/requestPortal/shared/dictionary/ui/PositionPicker.tsx
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import type { WebPartContext } from '@microsoft/sp-webpart-base';
+import styles from './PositionPicker.module.scss';
+import { useFormReadOnly } from '@tnsu/ui-kit';
+import { searchPositions } from '../positions.service';
+import { IPosition } from '../models/IPosition';
+
+export interface IPositionPickerProps {
+  context: WebPartContext;
+  id?: string;
+  /** Текущее название должности (то, что видно в поле). Ручной ввод — тоже валидное значение. */
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  /** Только чтение (режим согласующего). */
+  readOnly?: boolean;
+}
+
+const DEBOUNCE_MS = 300;
+const PAGE_SIZE = 30;
+
+/**
+ * Поле «Должность» со справочником (GET /Dictionary/Positions): ручной ввод
+ * не блокируется, а по мере набора (с задержкой) подтягиваются подсказки из
+ * справочника — выбор варианта просто подставляет его название в поле.
+ * Поиск — на сервере (?search=), т.к. справочник большой (878+ записей).
+ */
+export const PositionPicker: React.FC<IPositionPickerProps> = ({
+  context,
+  id,
+  value,
+  onChange,
+  placeholder,
+  readOnly
+}) => {
+  const contextReadOnly = useFormReadOnly();
+  const effectiveReadOnly = readOnly ?? contextReadOnly;
+
+  const [suggestions, setSuggestions] = React.useState<IPosition[]>([]);
+  const [open, setOpen] = React.useState<boolean>(false);
+  const [loading, setLoading] = React.useState<boolean>(false);
+  // Счётчик запросов — чтобы ответ на устаревший запрос (после ввода новых
+  // символов) не перезаписал подсказки более свежего.
+  const requestIdRef = React.useRef(0);
+
+  React.useEffect(() => {
+    const query = value.trim();
+    if (!query) {
+      setSuggestions([]);
+      setLoading(false);
+      return;
+    }
+    const requestId = ++requestIdRef.current;
+    setLoading(true);
+    const timer = setTimeout(() => {
+      searchPositions(context, query, PAGE_SIZE)
+        .then((list) => {
+          if (requestIdRef.current === requestId) {
+            setSuggestions(list);
+            setLoading(false);
+          }
+        })
+        .catch(() => {
+          if (requestIdRef.current === requestId) {
+            setSuggestions([]);
+            setLoading(false);
+          }
+        });
+    }, DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [context, value]);
+
+  const handlePick = (position: IPosition): void => {
+    onChange(position.position);
+    setOpen(false);
+  };
+
+  return (
+    <div className={styles.wrap}>
+      <input
+        id={id}
+        className={styles.input}
+        value={value}
+        placeholder={placeholder}
+        readOnly={effectiveReadOnly}
+        // setOpen(true) и при вводе, а не только по фокусу: после выбора список
+        // закрывается (handlePick), но фокус остаётся на поле — без этого
+        // повторный ввод в том же фокусе не открывал бы выпадашку заново.
+        onChange={(e) => {
+          onChange(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        onBlur={() => setOpen(false)}
+      />
+      {/* Быстрая очистка. preventDefault на mousedown — чтобы клик не «съел»
+          фокус до onClick (как в списке ниже). */}
+      {!effectiveReadOnly && value.length > 0 && (
+        <button
+          type="button"
+          className={styles.clear}
+          aria-label="Очистить"
+          title="Очистить"
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => {
+            onChange('');
+            setOpen(false);
+          }}
+        >
+          ×
+        </button>
+      )}
+      {!effectiveReadOnly && open && loading && (
+        <div className={styles.list}>
+          <div className={styles.status}>Поиск…</div>
+        </div>
+      )}
+      {!effectiveReadOnly && open && !loading && suggestions.length > 0 && (
+        <div className={styles.list}>
+          {suggestions.map((p) => (
+            <button
+              key={p.id}
+              type="button"
+              className={styles.item}
+              // preventDefault на mousedown — иначе input теряет фокус (onBlur) раньше onClick, и список закрывается до выбора.
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => handlePick(p)}
+            >
+              {p.position}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};