Dynamic: input cannot be focused

Sometimes inputs on Dynamic modal components cannot receive focus. This is a common issue with libraries that use react-focus-lock to manage focus.

This can be solved by disabling the focus trap on certain components so that the modal elements can be focused.

Chakra UI Example

tsx
<Drawer.Root
 focusTrap={false}
 closeOnInteractOutside={false}
 {/* ... */}
>
 {/* ... */}
</Drawer.Root>

Was this article helpful?

0 out of 0 found this helpful