Dragging inside a dialog is not working correctly

[mslourens]

I have a project which uses ngx-drag-select outside a dialog, which works fine, but when I move the same component inside a dialog, the drag-box is drawn incorrect and the items are not getting selected anymore. The more you scroll inside the dialog, the worse the mouse position gets.

Here is a small demo project where you can see what I mean: https://angular-ivy-z3pxou.stackblitz.io. In it I have a component consisting of a list with items. Dragging the list outside a dialog works fine, as you can see. But moving the same component inside a dialog (using the dialog service of ant-design, which uses the @angular/cdk package), the selection gets messed up.

[d3lm]

Hey, thanks for the reporting this issue. The problem here is that you need to manually call container.update() once the modal is open, to trigger re-calculation of the bounding boxes, and you'd have to somehow get access to the scroll container which is the nz-modal-container (or NzModalContainerComponent) and attach a scroll handler, so when you scroll you'd have to call container.update() as well. See https://github.com/d3lm/ngx-drag-to-select#how-do-i-deal-with-nested-scrollable-containers.

[mslourens]

Thanks @d3lm, I managed to get a reference to the scroll container and after calling the update method the selection worked fine! I really like this component, great work!

[d3lm]

Thank you @mslourens <3 It means a lot to hear that. Out of curiosity, how did you get ahold of the scroll container?

[mslourens]

I moved the scrollbar inside the dialog (by wrapping the content of the dialog inside a div with overflow: auto), set the height of the dialog to a calc(100vh - 100px) and used @ViewChild to get a reference to your component. After that I just called the update method in the scroll handler of the container div.

[d3lm]

Yep, that sounds about right. Awesome!