fix(calendar): починить ввод в поле «Длительность»

Числовое состояние (`Number(value) || 0`) не давало очистить поле —
удаление тут же превращалось обратно в 0, и следующая цифра визуально
дописывалась к нему. Состояние переведено на строку (пустое значение
теперь возможно, приводится к числу перед отправкой), плюс выделение
содержимого по фокусу — так первая же цифра заменяет старое значение,
а не приписывается к нему.
This commit is contained in:
2026-08-11 20:50:08 +03:00
parent e2254819c7
commit 9fb1f1f7ee

View File

@@ -75,7 +75,16 @@ export function ConferenceFormCard({ conference, onSaved, onDeleted, onCancelEdi
const [title, setTitle] = useState(conference?.title ?? '') const [title, setTitle] = useState(conference?.title ?? '')
const [dateStr, setDateStr] = useState(initialSlot.date) const [dateStr, setDateStr] = useState(initialSlot.date)
const [timeStr, setTimeStr] = useState(initialSlot.time) const [timeStr, setTimeStr] = useState(initialSlot.time)
const [durationMinutes, setDurationMinutes] = useState(conference?.duration_minutes ?? 30) // Строкой, а не числом: контролируемый number-инпут с числовым состоянием
// не даёт очистить поле (`Number('') || 0` тут же возвращает 0, значение
// "0" вспыхивает обратно) — строка хранит именно то, что ввёл пользователь,
// включая пустоту. Вторая половина жалобы («ввод дописывается после 0», а
// не заменяет его) — не про хранение, а про то, что при фокусе курсор
// просто вставал рядом с текущим значением; чинится `onFocus={select()}`
// у самого `<input>` ниже. `durationMinutes` — производное число для
// валидации и отправки.
const [durationMinutesInput, setDurationMinutesInput] = useState(String(conference?.duration_minutes ?? 30))
const durationMinutes = Number(durationMinutesInput) || 0
const [isClosed, setIsClosed] = useState(conference?.is_closed ?? false) const [isClosed, setIsClosed] = useState(conference?.is_closed ?? false)
const [password, setPassword] = useState('') const [password, setPassword] = useState('')
@@ -306,8 +315,9 @@ export function ConferenceFormCard({ conference, onSaved, onDeleted, onCancelEdi
type="number" type="number"
min={5} min={5}
step={5} step={5}
value={durationMinutes} value={durationMinutesInput}
onChange={(e) => setDurationMinutes(Number(e.target.value) || 0)} onChange={(e) => setDurationMinutesInput(e.target.value)}
onFocus={(e) => e.target.select()}
/> />
</div> </div>