Closed nick-y-ito closed 6 months ago
I researched and figured out one fact:
<DrawerContent>
with <Form>
With this structure, the DrawerBody
is scrollable. However, the form functionality does not work.
<DrawerRoot>
<DrawerTrigger asChild></DrawerTrigger>
<Form {...form}>
<form onSubmit={form.handleSubmit(processSubmit)}>
<DrawerContent side="bottom">
<DrawerHeader></DrawerHeader>
<DrawerBody></DrawerBody>
<DrawerFooter></DrawerFooter>
</DrawerContent>
</form>
</Form>
</DrawerRoot>;
<Form>
With this structure, the functionalities of the form work, although the DrawerBody
is not scrollable.
<DrawerRoot>
<DrawerTrigger asChild></DrawerTrigger>
<DrawerHeader></DrawerHeader>
<DrawerContent side="bottom">
<Form {...form}>
<form onSubmit={form.handleSubmit(processSubmit)}>
<DrawerBody></DrawerBody>
<DrawerFooter></DrawerFooter>
</form>
</Form>
</DrawerContent>
</DrawerRoot>;
Description
The
DrawerBody
component becomes unscrollable in some conditions, even though the example drawer is still scrollable.Steps to Reproduce
/foods
page and click the add (+) button at the bottom right corner so the food addition drawer gets opened.DrawerBody
part is taller than the allowed height, it and the<DrawerFooter>
are overflown.https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/97fe9fba-56be-47b4-a681-8433c5efad61
Environment
Notes
-