react-querybuilder/react-querybuilder

Not able to drop below a Group

Opened this issue · 2 comments

Description

When drag and drop is enabled:-
Case 1: When Combinator between rules is disabled - We are not able to drop Rule/Group below a group at all.
Case 2: When Combinator between rules is enabled - We can drop below the group as there is a combinator present under it but if the group is at last position then we are not able to drop below the group i.e the last position.

Reproduction

Case 1:- Try to drop below the group (it won't work): Try here
Case 2:- Try dropping below the group (it will work) and then move the group to last position then try drooping below it (it won't work): Try here

This is actually a problem I've struggled a lot with since I started implementing drag-and-drop. It's a hard problem because there's no "active" area at the bottom of a group (other than whatever padding is applied via CSS), so there's no surface over which to hover/drop and trigger an action. Well, at least there's no way to distinguish between the intent to drop a rule below the last rule in a group and the intent to drop a rule below the group itself.

I'll take a look at it again, but any help as far as how to implement this intuitively and with no (or at least minimal) breaking changes would be appreciated.

This wasn't what you were asking for, but an alternative that may be worth looking at is showShiftActions.

@jakeboone02 Thanks for looking in.
Will let you know if I find any approach.