Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drawer component behaves unexpectdly with Forms, Input Field Loses Focus and Draggable Class Added on Click. #2247

Closed
itse4elhaam opened this issue Dec 30, 2023 · 21 comments
Labels
stale? Is this issue stale? Stale

Comments

@itse4elhaam
Copy link

I have a form inside the drawer, text area and selects both work fine but input tags don't get focused when clicked by a mouse, it works when using tab though.

I think the drawer doesn't differentiate correctly between dragging click and input focus click.

To Reproduce, create a drawer component with a form inside it which contains input fields, I used Shadcn Input, Labels, Selects and everything.

Loved the new components but this issue is really bothering me.

shadcn-ui-issue

@itse4elhaam
Copy link
Author

@itse4elhaam
Copy link
Author

Also this is happening on chrome/chromium browsers - namely edge/chrome.

@demczenko
Copy link

Also have the same issue with inputs.

@ap-1
Copy link

ap-1 commented Jan 5, 2024

I'm having the opposite issue---I can focus on inputs but dragging seems to be broken (Firefox Developer Edition)

@abeisleem
Copy link

abeisleem commented Jan 11, 2024

Also having same issue. Specifically with shadcn Form element. Not an issue when using regular <form> with shadcn <Input> element (as shown in the Responsive Dialog example).

@GuillemotF
Copy link

I found an alternative to keep the focus on the input when clicking, in return the drawer can no longer be moved when dragging from the input area.

Add this to your input component :

<input
      onPointerDown={(e) => e.stopPropagation()}
      ...
/>

@shadcn shadcn added the stale? Is this issue stale? label Feb 4, 2024
@Baptistews
Copy link

This issue is still ongoing

Adding stopPropagation onpointerdown to the input fix it completely tho

@alizada-hadi
Copy link

I also have this issue with input, and textarea.

@itse4elhaam
Copy link
Author

I found an alternative to keep the focus on the input when clicking, in return the drawer can no longer be moved when dragging from the input area.

Add this to your input component :

<input
      onPointerDown={(e) => e.stopPropagation()}
      ...
/>

@shadcn You should consider adding this solution (or a better one) to this component.

@AdiRishi
Copy link

Just ran into this myself. I tried the onPointerDown solution proposed but it didn't do much. DId anyone figure out a solution?

@ramyjaber1
Copy link

i have exactly the same problem does anyone find a proper solution other than onPointerDown because it didn't work for me

@CarlosSousa2001
Copy link

Esta opção funcionou, eu estava com um dentro do Drawer e o calendário do input não abria

<input type={'date'} onPointerDown={(e) => e.stopPropagation()} ... />

@bertinselendo
Copy link

@itse4elhaam @AdiRishi @ramyjaber1 @shadcn

Here's how to simply fix this problem without sacrificing anything

modify the drawer component in src/components/ui/drawer.tsx and do this

image

@shadcn shadcn added the Stale label Jun 4, 2024
@shadcn
Copy link
Collaborator

shadcn commented Jun 11, 2024

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

@shadcn shadcn closed this as completed Jun 11, 2024
@mohamed-younes16
Copy link

i still have same issue

@sujjeee
Copy link

sujjeee commented Jul 20, 2024

hey @AdiRishi got any way to fix your issue?

@AdiRishi
Copy link

@sujjeee no unfortunately I didn't 😞 . I ended up switching to the Sheet component. Very similar visual style and it doesn't suffer the same issues on mobile.

@etozhealkhipce
Copy link

etozhealkhipce commented Sep 4, 2024

I was able to fix this by adding to disablePreventScroll props to drawer component

<Drawer
      open={isOpen}
      onClose={onClose}
      disablePreventScroll
    > 
     ...
</Drawer>

@adnan-razzaq
Copy link

we are still facing this issue with recent versions

@amirrstm
Copy link

amirrstm commented Oct 19, 2024

Fixed when adding repositionInputs as false in Drawer root.
<DrawerPrimitive.Root repositionInputs={false} {...props} />

@verxm
Copy link

verxm commented Feb 9, 2025

I had the same problem, but my Inputs were inside a Form that was inside a Dialog that was called by a Drawer.

I managed to solve the Dialog problem by following the recommendations in the comments:

After these changes, the use of inputs in the Dialog opened directly will work fine, but it still had the same behavior when opening the Dialog in a Drawer.

In my research, I didn't find any suggestion that worked for my case. But when I studied the Drawer properties a little more deeply, I saw a property called repositionInputs, and setting its value to false worked perfectly.

Correction:

...
<Drawer repositionInputs={false}>
...
<Drawer/>

Hope this helps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stale? Is this issue stale? Stale
Projects
None yet
Development

No branches or pull requests