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.

Sign up for GitHub

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

Jump to bottom

Scrolling issues when inside a container that overflows #193

Closed
tkoenig opened this issue Mar 8, 2023 · 7 comments · May be fixed by #204
Closed

Scrolling issues when inside a container that overflows #193

tkoenig opened this issue Mar 8, 2023 · 7 comments · May be fixed by #204
Assignees
@simonwep
Labels
duplicate This issue or pull request already exists

Comments

@tkoenig
Copy link
Contributor

tkoenig commented Mar 8, 2023

What is the problem?

I have a parent element of the selection area with the following style:

  height: 100vh;
  overflow: auto;

What is the current behavior?

When scrolling, the selection area stays in the same position on screen, instead of also scrolling.

Please provide the steps to reproduce and create a CodeSandbox.

https://codesandbox.io/p/sandbox/viselect-vanilla-forked-bjz7jz

What is the expected behavior?

The selection area should also scroll, when scrolling down the screen.

Your environment:

Toolset (e.g. webpack, vite, vue-cli...): esbuild
Version (@viselect/<insert package>): @viselect/vanilla@3.2.5
Browser:  Safari 16.3
OS:  MacOS Ventura
@tkoenig tkoenig added the unconfirmed Problem is not confirmed yet label Mar 8, 2023
@simonwep simonwep added bug Something isn't working and removed unconfirmed Problem is not confirmed yet labels Apr 11, 2023
@simonwep
Copy link
Owner

simonwep commented Apr 11, 2023 •
edited

Seems like this happens when the keys are used... I'll take a closer look at it in the next days. It will be fixed with the next patch release :)

@HollaG
Copy link

HollaG commented May 16, 2023

Would like to pop in here and say I'm facing this issue with a horizontal scrolling container as well.

Using React version

@rlesniak
Copy link

Hey @simonwep again! 😄 I decided to choose your library and here I am dealing with same issue. I have radix-ui scroll area, and inside it, I want to use your selectable, but cannot scroll while selecting 😞 any idea?

@simonwep
Copy link
Owner

Hey @simonwep again! smile I decided to choose your library and here I am dealing with same issue. I have radix-ui scroll area, and inside it, I want to use your selectable, but cannot scroll while selecting disappointed any idea?

Could you re-produce it on https://codesandbox.io? Maybe your case is a good starting point for me to fix it, this has always been a somewhat tricky issue

@rlesniak
Copy link

Sure, here is exactly your code from demo, but in scroll area wrapper - https://stackblitz.com/edit/vitejs-vite-fdtdkl?file=src%2FApp.jsx

@rlesniak
Copy link

Hey, @simonwep, I found solution. Working on PR right now

@rlesniak rlesniak mentioned this issue Jul 26, 2023
Open
@simonwep
Copy link
Owner

This seems to be a duplicate of #153, please move the discussion there. Maybe changing your boundary fixes it?

@simonwep simonwep added duplicate This issue or pull request already exists and removed bug Something isn't working labels Jul 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@simonwep simonwep

Labels
duplicate This issue or pull request already exists
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(react): expose viewportRef prop in SelectionArea rlesniak/selection
4 participants
@tkoenig @rlesniak @simonwep @HollaG