fix: scrolling inside the table with scrollbar

[chandraguptgosavi]

Fixed- when scrolling inside the table with scrollbar, cursor also selects rows. Now on scrolling with scrollbar content is scrolled in respective direction as expected and table rows don't get selected.

fixes issue #6773

[greptile-apps]

PR Summary

Implemented a fix to prevent unintended row selection when scrolling the table using the scrollbar by tracking the scrollbar drag state.

• Added isScrollHandlerDragging state in /packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx to track scrollbar interaction
• Updated ScrollWrapperContextValue type in /packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx to include drag state
• Added drag state check in /packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx to disable row selection during scrolling
• Implemented mouseDown/mouseUp handlers to accurately track when user is dragging the scrollbar

_{💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!}

_{3 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

style: consider moving this condition check into a useCallback to avoid recreating the function on every render

[ehconitin]

Thanks for the PR @chandraguptgosavi !

While this PR addresses the records selection issue, it doesn't prevent the blue selection box from appearing during drag operations.

I suggest we leverage the existing data-select-disable attribute handling that's already implemented in the DragSelect component. The DragSelect component is designed to check for this attribute and automatically prevents selection when it's present. This would be a more consistent approach with our existing codebase.

Here's a suggested implementation:

useEffect(() => {
const currentRef = scrollableRef.current;
if (currentRef !== null) {
initialize(currentRef);
// Add data-select-disable to scrollbars
const scrollbars = currentRef.querySelectorAll('.os-scrollbar');
scrollbars.forEach((scrollbar) => {
if (scrollbar instanceof HTMLElement) {
scrollbar.dataset.selectDisable = 'true';
}
});
}
// ... rest of cleanup code
}, [initialize, instance, setScrollTop, setOverlayScrollbars]);

This approach uses the built-in selection prevention mechanism and keeps the logic close to where the scrollbars are managed.

[chandraguptgosavi]

@ehconitin I have made the requested changes.

[ehconitin]

Thanks for implementing the suggested change! After further investigation, I realized there's an even better way to handle this using the OverlayScrollbars updated event callback.

Instead of using useEffect, we can set the data-select-disable attribute in the updated event, which ensures it's applied whenever the scrollbars are created/updated:

events: {
updated: (osInstance) => {
const { scrollbarVertical, scrollbarHorizontal } = osInstance.elements();
if (scrollbarVertical) {
scrollbarVertical.track.dataset.selectDisable = 'true';
}
if (scrollbarHorizontal) {
scrollbarHorizontal.track.dataset.selectDisable = 'true';
}
// ... existing update logic
}
}

@charlesBochet wdyt? thoughts?

[ehconitin]

LGTM!

[martmull]

Nice lgtm thank you