From 668f1b8b5b141e755c6631f8b36d533fd9ad4086 Mon Sep 17 00:00:00 2001
From: "Zimin A.N." <zimin.an@nstart.space>
Date: Wed, 6 May 2026 20:19:11 +0300
Subject: [PATCH] =?UTF-8?q?fix(form):=20FK=20select=20=D1=81=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=E2=80=94=20match?=
 =?UTF-8?q?=20TextInput/SingleSelect=20look?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

После перехода на native <select> в предыдущем коммите рендер
показывал OS default (двойная стрелка на macOS Safari, узкая высота,
native blue focus border). Не попадало в стиль формы — рядом
TextInput/DatePicker от @nstart/ui выглядели иначе.

Фикс:
- appearance-none убирает OS default
- Кастомный chevron как inline SVG в data-uri (color #687078 = carbon/40,
  same weight что у CaretDown в SingleSelect)
- pl-3 / pr-10 / py-2 = совпадает с TextInput высотой (~38px)
- focus:ring-1 ultramarain — same focus state как у TextInput

Native browser dropdown поведение сохраняется (auto-flip, scroll,
type-ahead) — просто внешне стало match'ить @nstart/ui дизайн систему.
---
 .../src/components/form/SchemaDrivenForm.tsx       | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx b/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
index 28e4c11..98abaf0 100644
--- a/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
+++ b/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
@@ -747,6 +747,13 @@ const ReferenceSelectField = ({
   // scroll и type-ahead search работают OOTB. SingleSelect popup
   // через createPortal с position:fixed не делает auto-flip и уходит
   // за нижний край когда триггер близко к низу modal'а.
+  // Caret chevron как inline SVG в data-uri — match'ит SingleSelect
+  // CaretDown иконку (color carbon/40, weight 'regular', size ~16).
+  // appearance-none убирает OS default стрелку, иначе на macOS Safari
+  // рендерится двойной chevron + native blue border.
+  const caretSvg =
+    "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23687078' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>\")"
+
   return (
     <Controller
       control={control}
@@ -759,13 +766,18 @@ const ReferenceSelectField = ({
             onChange={(e) => field.onChange(e.target.value || undefined)}
             disabled={isLoading}
             aria-invalid={Boolean(errorMsg)}
+            // appearance-none + custom caret = одинаковый look на всех
+            // платформах. py-2 (8px) match'ит TextInput высоту.
+            // pr-10 даёт место под chevron, остальной padding как у TextInput.
             className={[
-              'w-full border rounded-sm px-3 py-2 text-sm font-secondary',
+              'w-full appearance-none border rounded-sm pl-3 pr-10 py-2 text-sm font-secondary',
               'bg-white text-black transition-colors',
+              'bg-no-repeat bg-[right_0.75rem_center] bg-[length:1rem_1rem]',
               'focus:outline-none focus:ring-1 focus:ring-ultramarain focus:border-ultramarain',
               errorMsg ? 'border-mars' : 'border-regolith hover:border-carbon/40',
               isLoading ? 'cursor-wait text-carbon/60' : 'cursor-pointer',
             ].join(' ')}
+            style={{ backgroundImage: caretSvg }}
           >
             <option value="">{isLoading ? '…' : '—'}</option>
             {options.map((opt) => (