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

Text inside drawer component is not draggable for copying #295

Closed
suhjohn opened this issue Mar 11, 2024 · 5 comments · Fixed by #314
Closed

Text inside drawer component is not draggable for copying #295

suhjohn opened this issue Mar 11, 2024 · 5 comments · Fixed by #314

Comments

@suhjohn
Copy link

suhjohn commented Mar 11, 2024

Hi, I expect the cursor to change when I hover on top of a p tag inside Drawer.Content.
I want to be able to drag on the text so that I can copy it. This doesn't seem to work whether dismissible={false} or not.
What can I do to fix this?

I played around on the console and I see that removing "vaul-drawer" on the top level fixes the issue. Is that necessary?

@suhjohn suhjohn changed the title Text component inside drawer component is not draggable Text component inside drawer component is not draggable for copying Mar 11, 2024
@suhjohn suhjohn changed the title Text component inside drawer component is not draggable for copying Text inside drawer component is not draggable for copying Mar 11, 2024
@suhjohn
Copy link
Author

suhjohn commented Mar 11, 2024

Solution I currently have

setTimeout(() => {
    const drawerElement = document.querySelector(
      'div[role="dialog"][vaul-drawer=""]',
    );
    if (drawerElement) {
      drawerElement.removeAttribute('vaul-drawer');
    }
  }, 500);

Makes the text draggable

@emilkowalski
Copy link
Owner

It's unclear what you what to achieve to me, can you clarify?

@naufalfarras
Copy link

we might want to copy and paste the text inside the drawer, instead when we want to drag to select the text, it is dragging the entire drawer (text was not selected)

@gustavo-maurina
Copy link

I also have this problem. I was hoping 0.9.0 would fix this, with the addition of [data-vaul-no-drag], but I'm not sure whether I'm using it the wrong way or not, but it doesn't seem to work for selecting text (I want to select text inside input that are on the drawer)

@anstiwar
Copy link

anstiwar commented Apr 3, 2024

To copy text from the Drawer component we need to set the user-select to text instead of none. tried this using the browser developer mode and able to copy the text , but not sure how to apply this via my component code directly.

image

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

Successfully merging a pull request may close this issue.

5 participants