javascriptjqueryreactjsquery-builderjquery-query-builder

Prevent Operator Reset When Changing Field in jQuery QueryBuilder


I'm using jQuery QueryBuilder, and I noticed that when changing the left-hand side field, the operator resets automatically. I understand this is built-in behavior since different fields may support different operators.

Looking into the source code, I found this behavior in core.js:

// set the operator without triggering update event  
if (rule.filter.default_operator) {  
    rule.__.operator = this.getOperatorByType(rule.filter.default_operator);  
}  
else {  
    rule.__.operator = operators[0];  
}

(Reference: QueryBuilder Source Code)

However, in my use case, I'd like to retain the previously selected operator whenever possible.

Is there a way to override this behavior and prevent the operator from resetting unnecessarily? Any suggestions or workarounds would be greatly appreciated!


Solution

  • We can fix this by keeping track of the operator for each rule.

    const [ruleOperators, setRuleOperators] = useState({});
    

    We can do that by using afterUpdateRuleOperator.queryBuilder

       $('#builder').on('afterUpdateRuleOperator.queryBuilder', (e, rule) => {
           setRuleOperators(prev => ({
              ...prev,
              [rule.id]: rule.operator,
           }));
        });
    

    Then update the rule with previous operator immediately after changing the field using afterUpdateRuleFilter.queryBuilder

       $('#builder').on('afterUpdateRuleFilter.queryBuilder', (e, rule) => {
          const prevOp = ruleOperators[rule.id];
    
          if (prevOp) {
            rule.operator = prevOp;
            $('#builder').queryBuilder('trigger', 'afterUpdateRuleOperator', rule);
          }
        });