Partially scrolled out targets become un selectable

[bluematter]

Environments

• Framework name: React
• Framework version: 18.2.0
• Component name: React-Selecto
• Component version: 1.17.0
• Testable Address(optional): https://daybrush.com/selecto/storybook/

Description

When you have a selectable target partially out of the scroll window it becomes un selectable.

Here is a video demo. You can see in both the demo app and my app the behavior is consistent. When I scroll the target partially out of the scroll window it should still be selectable. Currently it is not.

https://www.loom.com/share/2dc4f87d9c8d4bd9b7afef999b65ffda

[daybrush]

@bluematter

The demo's dragContainer was modified to be window. Thank you :)

[bluematter]

This is happening to me in my apps environment also. I am using https://github.com/malte-wessel/react-custom-scrollbars.

Is the solution to add scrollOptions? I tried doing it with the react-custom-scrollbars library but it seems to not be working. Anything I might be missing?

I'm using it like this

scrollOptions={{
  container: scrollBarsRef.current?.refs?.scrollbars?.container as HTMLElement
}}

[daybrush]

@bluematter

okay. I'll fix it to work as follows.

scrollOptions={{
  container: () => scrollBarsRef.current?.refs?.scrollbars?.container as HTMLElement
}}

[bluematter]

Do you think this will be updated this week? Thanks for your hard work :)

[daybrush]

@bluematter

Maybe today, or tomorrow?

[bluematter]

Cool, I see you putting in work, take your time... Excited to fix this issue in https://motionbox.io

[daybrush]

@bluematter

• lit-selecto 1.18.0
• preact-selecto 1.15.0
• react-selecto 1.18.0
• selecto 1.18.0
• svelte-selecto 1.18.0
• vue-selecto 1.18.0
• vue3-selecto 1.4.0
• ngx-selecto 1.18.0

selecto's new version is released.

Suppport string(selector), React Ref, Vue Ref, Function types.

You can use:

scrollOptions={{
  container: () => scrollBarsRef.current?.refs?.scrollbars?.container as HTMLElement
}}

[bluematter]

Do you know why 1.18.0 is throwing an error in TS? "Cannot find module 'react-selecto' or its corresponding type declarations.

I tried deleting node_modules and restarting ts server. The package is inside my node_modules folder.

"

[daybrush]

@bluematter

oh, sorry. Test 1.18.1 version.

[bluematter]

No worries, saw the change it works... still not getting the out of scroll element to select, but let me hack at it and see if I am missing something. Thank you so much.

It seems selectable content scrolled outside is not passing the hitTest. I'm currently debugging and will possibly submit a PR today/add the code here.

Taking a look at hitTest https://github.com/daybrush/selecto/blob/master/packages/selecto/src/SelectoManager.tsx#L399

Logging innerGroups I notice a minor difference between when selecto works and doesn't due to content out of window.

The difference is when in window and works, the innerGroups look like this.

Working

{
  0: {
    0: {
      points: [Array(4)],
      targets: [TARGET]
    }
  }
}

Not Working

{
  0: {
    -1: {
      points: [Array(4)],
      targets: [TARGET]
    }
  }
}

The only difference being -1, the targets are there perfectly. I'm investigating more to see why -1 is being added, and how the scroll window plays into it.

UPDATE

Ok so I found out why the out of bounds element can't be selected. Here is the line causing the issue https://github.com/daybrush/selecto/blob/b68f33a7b420447f37a326be602c37792cca1114/packages/selecto/src/SelectoManager.tsx#L1186

When my selectable element is out of view i.e scrolled out of view the y value will naturally be negative. So what is happening is

// pos[1] is equal to -32.658409118652344
// innerHeight in my case is 796
const y = Math.floor(pos[1] / innerHeight);
// this means y = -1

[bluematter]

I have a solution to the issue, I think it's unrelated to the patch? Any insights on this?

https://www.loom.com/share/d9a163b2e5fc4f529f54afd3c23da0a1

[daybrush]

@bluematter

• lit-selecto 1.18.3
• preact-selecto 1.15.2
• react-selecto 1.18.2
• selecto 1.18.2
• svelte-selecto 1.18.2
• vue-selecto 1.18.2
• vue3-selecto 1.4.2
• ngx-selecto 1.18.2

selecto's new version is released. It was a mistake in the coordinate calculation.