Я пытаюсь предотвратить закрытие компонента Sheet из shadcn/ui, когда проверка ввода данных пользователем внутри компонента листа не удалась. В настоящее время при нажатии кнопки, даже если есть ошибки проверки, обработанные Form, Sheet закрывается, и мне приходится вручную повторно открывать компонент, чтобы устранить проблему. Код выглядит следующим образом
<Sheet>
<SheetTrigger asChild>...</SheetTrigger>
<SheetContent>
<div className = "grid gap-4 py-4">
<Form { ...form }>
<form onSubmit = { form.handleSubmit(onSubmit) } className = "w-full space-y-6">
...
<SheetFooter>
<SheetClose asChild>
<Button type = "submit">Save changes</Button>
</SheetClose>
</SheetFooter>
</form>
</Form>
</div>
</SheetContent>
</Sheet >
Я попробовал добавить к элементу aria-errormessage такие свойства, как onError, onErrorCapture и SheetClose, но это не помешало закрыть лист.
aria-errormessage='Please correct all errors'
onError = { (event) => event.preventDefault }
onErrorCapture = { (event) => event.preventDefault }



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы можете добиться этого разными способами. Один из них заключается в следующем:
<Sheet /> контролируемымconst [isOpen, setIsOpen] = useState(false);
return (
<Sheet
open = {isOpen}
onOpenChange = {(newValue) => {
if (newValue) setIsOpen(true); // when it's closed, allow opening it
// when it's opened
if (form.isValid) setIsOpen(newValue);
// otherwise, don't do anything
}}
>
...
</Sheet>
)
Когда я использую следующий код, лист остается открытым, если возникает ошибка (что является ожидаемым поведением), но он не закрывается, когда я нажимаю кнопку «Закрыть». Как закрыть лист?
<Sheet open = {isOpen} onOpenChange = {() => setIsOpen(true)}>
onOpenChange должна быть более сложной функцией, имеющей всю логику открытия и закрытия листа. Точная структура функции будет зависеть от варианта использования.
Я отметил ответ как принятый сейчас