react-querybuilder: [Bug] Combinator selector applies for entire group instead of particular position

I have a use case where I want to create the following (simple) condition: (foo AND bar OR xyz).

Using the demo page I tried to add 3 rules and then change the second combinator to OR. Immediately after changing it to OR, the first combinator also changed to OR.

After doing some tests it seems that the combinator’s behaviour is buggy. Changing one of the combinators causes all other combinators at the same group level to change (to the same value).

I recorded a video demoing the bug:

https://user-images.githubusercontent.com/89727/122836916-7c589c80-d2f3-11eb-9eef-55dd5bc07a6e.mov

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 30 (16 by maintainers)

Most upvoted comments

I think I’m actually changing my mind about this one. I’ve started looking into adding an inlineCombinators?: boolean prop that would flip the <QueryBuilder /> component from using RuleGroupType for the query and onQueryChange props to using a new type (tentatively named RuleGroupTypeIC) that would remove the combinator attribute and allow strings in the rules array. The intent would be to allow something like this:

const query: RuleGroupTypeIC = {
  rules: [
    { field: 'firstName', operator: '=', value: 'Name' },
    'and',
    { field: 'middleName', operator: '!=', value: 'Name' },
    'or',
    { field: 'lastName', operator: '=', value: 'Name' },
  ]
}

The RuleGroup component would render an independent combinatorSelector between each pair of rules.

I’ve got the functionality mostly working (along with modifications to formatQuery and parseSQL), but the TypeScript types are giving me headaches since I’m trying to maintain backwards compatibility and not export a completely separate base component. Once I get some good feedback on this r/typescript post, I’ll fix up the types and create a PR that we can look at before merging.

jakeboone02 on Nov 1, 2021

Hey @jakeboone02 ! Sorry for the long delay in the response; took some vacations (holidays and so). I tested the 4.0 and everything looks good! The dnd bug is completely gone. I have just one small complaint about breaking compatibility on the format level, but I’ll open a new bug for that.

Kudos for the great work!

alexandernst on Jan 9, 2022

Let me give it a try!

alexandernst on Nov 27, 2021

@alexandernst I just released v4.0.0-beta.6 which exports all the defaults and utils as we discussed.

jakeboone02 on Nov 27, 2021

Sorry it’s taking so long! I meant to have another beta out sooner but life has gotten in the way lately. Anyway, I’m also swapping out the webpack build system for Parcel, reorganizing the TypeScript types, preparing a new documentation site, and converting the whole thing to a monorepo. That said, it shouldn’t be too much longer. Thanks for your patience!

jakeboone02 on Nov 22, 2021

Waiting for the next beta so I can test this and give you more feedback 😃

alexandernst on Nov 15, 2021

Hi @jakeboone02 ! Sorry for taking so long. It has been a really busy week. Fortunately, I’ll have a lot of time during the weekend so I’ll be able to test this.

alexandernst on Nov 12, 2021