Scrolling issues when inside a container that overflows

[tkoenig]

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/[email protected]
Browser:  Safari 16.3
OS:  MacOS Ventura

[simonwep]

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]

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

Using React version

[rlesniak]

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]

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]

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]

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

[simonwep]

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