fix(calendar): починить ввод в поле «Длительность»
Числовое состояние (`Number(value) || 0`) не давало очистить поле — удаление тут же превращалось обратно в 0, и следующая цифра визуально дописывалась к нему. Состояние переведено на строку (пустое значение теперь возможно, приводится к числу перед отправкой), плюс выделение содержимого по фокусу — так первая же цифра заменяет старое значение, а не приписывается к нему.
This commit is contained in:
@@ -75,7 +75,16 @@ export function ConferenceFormCard({ conference, onSaved, onDeleted, onCancelEdi
|
||||
const [title, setTitle] = useState(conference?.title ?? '')
|
||||
const [dateStr, setDateStr] = useState(initialSlot.date)
|
||||
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 [password, setPassword] = useState('')
|
||||
@@ -306,8 +315,9 @@ export function ConferenceFormCard({ conference, onSaved, onDeleted, onCancelEdi
|
||||
type="number"
|
||||
min={5}
|
||||
step={5}
|
||||
value={durationMinutes}
|
||||
onChange={(e) => setDurationMinutes(Number(e.target.value) || 0)}
|
||||
value={durationMinutesInput}
|
||||
onChange={(e) => setDurationMinutesInput(e.target.value)}
|
||||
onFocus={(e) => e.target.select()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user