Multiple Elements are dragged

[Pyakz]

React Query Builder version

"react-querybuilder": "^7.0.1",

Platform

MacOS Chrome, Node v20.10.0

Description

"@react-querybuilder/dnd": "^7.0.1",
"@react-querybuilder/mantine": "^7.0.1",
"next": "14.0.4",
"@mantine/colors-generator": "^7.5.0",
"@mantine/core": "^7.6.1",
"@mantine/dates": "^7.6.1",
"@mantine/dropzone": "^7.5.1",
"@mantine/form": "^7.3.2",
"@mantine/hooks": "^7.6.1",
"@mantine/modals": "^7.5.1",
"@mantine/notifications": "^7.3.2",
"@mantine/tiptap": "^7.6.0",

Reproduction

 <QueryBuilderMantine>
      <QueryBuilderDnD dnd={{ ...ReactDnD, ...ReactDndHtml5Backend }}>
        <QueryBuilder
          fields={modelFields}
          query={query}
          onQueryChange={setQuery}
          controlClassnames={{
            queryBuilder: "queryBuilder-branches ",
            ruleGroup: "border-none",
          }}
          operators={defaultOperators}
        />
      </QueryBuilderDnD>
    </QueryBuilderMantine>

Expected behavior

should drag only one element

Additional information

Screen.Recording.2024-03-08.at.11.55.11.PM.mov

[jakeboone02]

Could this be an issue with Mantine itself or maybe the Next.js base CSS? I can't reproduce it in the demo (https://react-querybuilder.js.org/demo/mantine#enableDragAndDrop=true) or with other RQB compatibility packages, but I did reproduce it locally. The drag-and-drop functionality isn't affected, so it's just an aesthetic problem.

[Pyakz]

Hmhhm, i have another question, how do i convert back the formatted mongodb to a RuleGroupType

[jakeboone02]

Hmhhm, i have another question, how do i convert back the formatted mongodb to a RuleGroupType

https://react-querybuilder.js.org/docs/utils/import#mongodb

[Pyakz]

Got it, thanks , i got confused a bit on where to get the function
its on import { parseMongoDB } from "react-querybuilder/parseMongoDB";

i'll you you know guys when i found, what's causing this multiple dragging bug on mantine

[jakeboone02]

Sounds good. Was there anything confusing or missing from the documentation re: parseMongoDB?

[Pyakz]

well, the page didn't say where to import them, and my IDE (VSCode) kinda broken so it didn't find where to get these parsers.

i found them at the bottom of this page

[Pyakz]

sorry, been looking at the code, but i can't fine a way to add props in my UI

like for example i want to make the checkbox size to "lg" how do i do it?

[jakeboone02]

You can pass any props into the value editor components and they will be passed on to the library components, like this:

const VE = (props: ValueEditorProps) => {
  if (props.type === 'select') {
    return <MantineValueEditor {...props} size="lg" />;
  }
  return <MantineValueEditor {...props} />;
};

That will set any "select" editors to large.

Example sandbox here: https://codesandbox.io/p/devbox/myly6d?file=%2Fsrc%2FApp.tsx

[jakeboone02]

Make sure you check out this page: https://react-querybuilder.js.org/docs/tips/common-mistakes#custom-component-as-closure

[Pyakz]

Thanks, what about the changing of positions?
this is initially the mockup sent to me, how do i positions these buttons?

[Pyakz]

const VE = (props: ValueEditorProps) => {
  if (props.type === 'select') {
    return <MantineValueEditor {...props} size="lg" />;
  }
  return <MantineValueEditor {...props} />;
};

didn't work, its causing some ts error, i run the repo locally, seems like i need to put it inside extraProps

  if (props.type === "checkbox") {
    return (
      <MantineValueEditor
        {...props}
        extraProps={{
          size: "lg",
        }}
      />
    );
  }

  if (props.inputType === "date") {
    return (
      <MantineValueEditor
        {...props}
        extraProps={{
          className: "flex-1",
        }}
      />
    );
  }
};

[jakeboone02]

didn't work, its causing some ts error, i run the repo locally, seems like i need to put it inside extraProps

Oh you're right, sorry about that! I forgot about adding that prop, and I only did it like a month ago.

Judging by your screenshot, I'm guessing the requirement would include independent combinators. Pay close attention to the query structure as it's slightly different than the default.

To move the combinator selector inline with the rule like that, try this:

.ruleGroup-body {
  // Default is display: flex, so must override
  display: grid !important;
  // Allow the second column (the rule/subgroup) to expand as needed
  grid-template-columns: auto 1fr;
  // Keep the combinator aligned with the top of the rule/subgroup.
  // This is especially helpful for subgroups.
  align-items: start;

  // Indent the first rule/subgroup since it has no preceding combinator
  & > .rule,
  & > .ruleGroup {
    &:first-child {
      grid-column-start: 2;
    }
  }

  // Keep the combinator selector narrow
  .betweenRules {
    width: 100px;
  }
}

Live example here: https://codesandbox.io/p/devbox/bold-rain-3742l3?file=%2Fsrc%2Fstyles.scss%3A12%2C1-34%2C1

Edit: I also added this example to the styling documentation: https://react-querybuilder.js.org/docs/styling/overview#inline-independent-combinators

[alexandernst]

I'm also hitting this bug

[alexandernst]

After some further debugging, this seems to be caused by an absolutely positioned element inside my custom dropdown.

This is what I have:

controlElements={{
    valueEditor: MyCustomValueEditor,

My value editor when inspected in the DOM:

<div class="my_value_editor">
    <div class="d-block">
        <select> ... </select>
    </div>

    <div style="position: absolute; width: 100%;">  <-- this is shown conditionally
        <div style=""> some stuff here </div>
    </div>
</div>

It seems like the DnD library is taking a "screenshot" of the "visual area" that the rule row is taking, but it gets confused about the actual visual area.

[jakeboone02]

It seems like the DnD library is taking a "screenshot" of the "visual area" that the rule row is taking, but it gets confused about the actual visual area.

Yeah, I think that's exactly what's happening. I've never looked closely at the mechanism react-dnd uses to create that ghost element, but "screenshot" is probably a close enough approximation.

I can start to investigate this but before I do, do you have any ideas for mitigating the problem? Might be as simple as "recommended CSS" if you're using @react-querybuilder/dnd along with @react-querybuilder/mantine.

[alexandernst]

No, sorry, I've no idea how to tackle this with a "recommended css". My gut is telling me it will involve some js to measure the visible size of the actual rule row by traversing child elements, ignoring any elements that have position: absolute.