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 is often solved by disabling the focus trap on certain components so that the modal elements can be focused.

​
Chakra UI Example

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

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 is often solved by disabling the focus trap on certain components so that the modal elements can be focused.

​
Chakra UI Example

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