clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
12.87k stars 640 forks source link

Keyboard sensor is completely broken with variable large items #985

Open marcospassos opened 1 year ago

marcospassos commented 1 year ago

The keyboard sensor works relatively well with small variable-size items but becomes completely buggy with large ones as the video below shows:

https://user-images.githubusercontent.com/943036/210367012-dcd8737b-68a6-4d0f-bf33-54e70d35e30a.mov

To reproduce, modify the VariableHeights story to :

export const VariableHeights = () => {
  const randomHeights = createRange(props.itemCount as number).map(() => {
    const heights = [400, undefined, 600, undefined, 300, undefined];
    const randomHeight = heights[Math.floor(Math.random() * heights.length)];

    return randomHeight;
  });

  return (
    <Sortable
      {...props}
      wrapperStyle={({id}) => {
        return {
          height: randomHeights[Number(id)],
        };
      }}
    />
  );
};

We found the issue by implementing a similar example. Note the dragged item sometimes skips elements and gets misaligned:

https://user-images.githubusercontent.com/943036/210369785-837382df-f939-4e17-bbba-caaed8a4c67e.mov

Note that most times, the problem only happens when navigating bottom up – not sure if it's just a coincidence though.

marcospassos commented 1 year ago

It is worth noting that the pointer sensor works great in this case. It's just the keyboard sensor that gets buggy.

petrajov commented 1 year ago

@marcospassos I came across the same issue. Did you perhaps manage to find a workaround for it?

marcospassos commented 1 year ago

Undertely no. I had to disable the keyboard accessibility features for now.

@clauderic, any chances of taking a look at this? It's unfortunate to lose such an essential feature for those who need it the most.

petrajov commented 1 year ago

I also think that the MouseSensor has issues with the same scenario. See how number 2 switches places with number 4, and then it needs to go a bit lower so it could switch places with number 5, basically the second switch won't happen until the middle of item number 2 reaches the y coordinate of item number 5. https://user-images.githubusercontent.com/78666737/216044480-e46ae197-f44d-4846-ab19-5da618a4f5f8.mov

https://user-images.githubusercontent.com/78666737/216045698-4976f7f9-9c3c-4830-90fe-23f4a133eb6b.mov

Hyokune commented 10 months ago

Has anyone created a workaround for this issue?