clauderic
Keyboard sensor is completely broken with variable large items
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.
It is worth noting that the pointer sensor works great in this case. It's just the keyboard sensor that gets buggy.
@marcospassos I came across the same issue. Did you perhaps manage to find a workaround for it?
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.
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
