Merge branch 'fix/fk-select-overflow' into 'main'
fix(form): FK select label overflow — truncate + ellipsis (наезжают) See merge request 2-6/2-6-4/terravault/ordinis!104
This commit is contained in:
@@ -966,9 +966,13 @@ const ReferenceSelectField = ({
|
||||
aria-invalid={Boolean(errorMsg)}
|
||||
aria-busy={isLoading}
|
||||
// appearance-none убирает OS default стрелку.
|
||||
// py-2 (8px) match'ит TextInput высоту. pr-10 — место под адорнмент.
|
||||
// pr-9 — место под custom адорнмент (chevron at right-3 + 12px).
|
||||
// truncate/text-ellipsis форсят ellipsis на длинных option labels
|
||||
// (предотвращает 'наезд' текста на chevron, см. buildOption — там
|
||||
// ещё дополнительный length cap чтобы native select не overflowed).
|
||||
className={[
|
||||
'w-full appearance-none border rounded-sm pl-3 pr-10 py-2 text-body font-display',
|
||||
'w-full appearance-none border rounded-sm pl-3 pr-9 py-2 text-body font-display',
|
||||
'truncate overflow-hidden whitespace-nowrap text-ellipsis',
|
||||
'bg-white text-black transition-colors',
|
||||
'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
|
||||
errorMsg ? 'border-mars' : 'border-line hover:border-ink/40',
|
||||
@@ -1003,10 +1007,14 @@ const ReferenceSelectField = ({
|
||||
|
||||
/**
|
||||
* Build a SelectOption from a record. Uses `record.data[refField]` as the
|
||||
* option id (the FK value). Label combines id with a localized name field
|
||||
* when available — `OPERATIONAL — Действующий` is much friendlier than
|
||||
* just `OPERATIONAL`.
|
||||
* option id (the FK value). Label combines id с локализованным name'ом —
|
||||
* `OPERATIONAL — Действующий` понятнее чем чистый `OPERATIONAL`. Если
|
||||
* комбинация длиннее MAX_LABEL chars, name truncate'ится с ellipsis —
|
||||
* иначе native `<select>` trigger перекрывается chevron'ом (см. screenshot
|
||||
* 2026-05-11 'наезжают'). Полный display name остаётся в hint поля.
|
||||
*/
|
||||
const MAX_FK_LABEL_CHARS = 28
|
||||
|
||||
const buildOption = (
|
||||
record: FlattenedRecord,
|
||||
refField: string | undefined,
|
||||
@@ -1018,8 +1026,14 @@ const buildOption = (
|
||||
|
||||
const nameField = record.data?.['name']
|
||||
const display = pickLocalized(nameField, defaultLocale)
|
||||
const label = display ? `${idStr} — ${display}` : idStr
|
||||
return { id: idStr, label }
|
||||
if (!display) return { id: idStr, label: idStr }
|
||||
|
||||
const combined = `${idStr} — ${display}`
|
||||
if (combined.length <= MAX_FK_LABEL_CHARS) return { id: idStr, label: combined }
|
||||
// Truncate display, keep code intact (код — primary identifier).
|
||||
const allowedDisplayLen = Math.max(4, MAX_FK_LABEL_CHARS - idStr.length - 4) // ' — ' + '…'
|
||||
const truncated = `${display.slice(0, allowedDisplayLen).trimEnd()}…`
|
||||
return { id: idStr, label: `${idStr} — ${truncated}` }
|
||||
}
|
||||
|
||||
const countErrorsPerTab = (
|
||||
|
||||
Reference in New Issue
Block a user