Dynamic valueEditors based on operators for a field

[muddana-harini]

Is there a way to get different value editors like dropdown or textbox dynamically based on the selected operator for a field?? If yes, how?

[jakeboone02]

This should get you pointed in the right direction:

https://react-querybuilder.js.org/docs/tips/custom-with-fallback

[dheerajkumar10]

I @jakeboone02, Thanks for the reply. This is working for me. Nice to connect with you and solve the problem, I didn't get the idea using [getValueEditorType.
Thanks again.

[fxylee]

A few years ago we solve it by a component like ValueEditorDispatcher.

And now, we have a ValueEditor to build json value

[koseenes]

I need to use dynamically change combobox select type, when i choose "=" or "!=" operator select control have to be single select, when i choose "in" or "not in" select control have to multiselect.

This is sample code: https://codesandbox.io/p/sandbox/cocky-goldberg-nqrshg?file=%2Fsrc%2FApp.tsx%3A67%2C2-77%2C5

I expect below getValueEditorType function change ValueEditorType dynamically, but it didnt change.

const getValueEditorType = (fieldName: string, operator: string) => {
   if (fields.find(f => f.name === fieldName)!.valueEditorType == 'select') {
     if (operator === 'in' || operator === 'notIn') return 'multiselect';
     else return 'select';
   }
   return (
     (fields.find(f => f.name === fieldName)!
       .valueEditorType as ValueEditorType) ?? 'text'
   );
 };

Do you have any recommendation?

[jakeboone02]

@koseenes The valueEditorType property of the field will supersede the return value of getValueEditorType. Fortunately valueEditorType can be a function that takes an operator, so you can apply the same logic to the field itself like this:

const getValueEditorType = (operator: string) =>
  operator === 'in' || operator === 'notIn' ? 'multiselect' : 'select';

const fields: Field[] = [
  {
    name: 'inputType',
    label: 'Input Type',
    valueEditorType: getValueEditorType,
    values: inputTypeOptions,
  },
];

I forked and corrected your sandbox here: https://codesandbox.io/p/sandbox/clever-dew-36c8lf?file=%2Fsrc%2FApp.tsx%3A17%2C1-28%2C1

[koseenes]

Thank you @jakeboone02, resolved.

[muddana-harini]

            Hey Jake,
            I am trying to get the data from api. it is consoling the value  but returning the data in dropdown.
            instead if i directly send the data hardcoded without calling api it is showing the dropdown.
            
            getValues={async (field, op) => {
                try {
                if (op === 'isInList') {
          
                    console.log("Field:",field)
                    const data = await fetchData(field);
                    console.log("DATA:", data);
                    return data;
                  } 
                  return [];
                }catch (error) {
                    console.error("Error fetching data:", error);
                    return [];
                  }
              }}
              
              can you help me with this.?

[jakeboone02]

RQB doesn't support async functions in any props. I would recommend a library like react-select if you want to fetch values from an API.

[muddana-harini]

Thank you for the reply, I managed to get the dropdown but I found out other issue.
if my filed has operator list is having dropdown operator in the first option
"drgCode": [
{ "name": "isInList", "label": "Is in List", "valueEditorType": "select" },
{ "name": "eq", "label": "Equal to", "inputType": "text" },
{ "name": "isInSet", "label": "Is In Set of", "inputType": "text" }
]
then it is taking the first value automatically in the query or taking the selected value. but if the list is like
"drgCode": [
{ "name": "eq", "label": "Equal to", "inputType": "text" },
{ "name": "isInSet", "label": "Is In Set of", "inputType": "text" }
{ "name": "isInList", "label": "Is in List", "valueEditorType": "select" },
]
then it is not taking the first value if selected....to select the first value i had to select any other option in the dropdown and then again select first value to get that in the query.
Any idea why this is happening..or any clue to solve this issue.

[jakeboone02]

Please replicate the issue in CodeSandbox or similar live example. You can start one of the example templates.

[dheerajkumar10]

Hey @jakeboone02, thank you for the reply, I think what @muddana-harini is trying to tell is when we change the field type based on operator, like we change from textbox to select box the value "dropdown" is not automatically applied in value field. I changed the code and added it here
added console logs for reference.

If we have select option as default one then its picking the value

try changing

   case 'inputType':
      return [
        { name: '>', label: 'greaterthan' },
        { name: '=', label: 'On' },
        { name: '!=', label: 'Not On' },
        { name: '<', label: 'less than' },
      ];

to

      case 'inputType':
      return [
        { name: '=', label: 'On' },
        { name: '>', label: 'greaterthan' },
        { name: '!=', label: 'Not On' },
        { name: '<', label: 'less than' },
      ];

you can see when its default select for inputtype it picks first option as value but when we change it default to text and then change the operator to pick select it doesn't pick value even when you click in that first option (you have to click other option to make change detection work) just check the query value

https://codesandbox.io/p/devbox/relaxed-shape-yhftfh?file=%2Fsrc%2FApp.tsx%3A68%2C47

[jakeboone02]

Try adding the resetOnOperatorChange prop.

[dheerajkumar10]

Thanks @jakeboone02.

[muddana-harini]

Hey Jake,
When I tried giving the "between" operator for the "date" datatype it is not showing two input boxes. Whereas, for "text" and "number" datatype it is showing two input boxes....only for date datatype it is showing only one box I am calling operators from separate json file, is that the reason?

const getOperators = (fieldName) => {
if (fieldName in operators) {
return operators[fieldName];
}
return [];
};
const handleQueryChange = (newQuery) => {
processGroup(newQuery);
setQuery(newQuery);
};

json file--->
{
"fields": [
{ "name": "birthDate", "label": "Birth Date", "datatype": "date", "inputType": "date" },
],
"operators": {
"birthDate": [
{ "name": "between", "label": "Between", "inputType": "date" }
]
}
}

[jakeboone02]

Can you put together a sandbox or minimal repo?

[muddana-harini]

https://codesandbox.io/p/sandbox/github/muddana-harini/querybuilder/tree/main/

please check accident date and service date with between operator...it will be showing only one box fir input

[jakeboone02]

@muddana-harini It looks like you've mixed up valueEditorType with inputType.

This sandbox fixes the issue: https://codesandbox.io/p/devbox/4s7kfg?file=%2Fsrc%2FApp.jsx%3A183%2C1-184%2C1

The change was this, in the getValueEditorType prop:

-    return selectedField.inputType || "text";
+    return selectedField.valueEditorType || "text";

[muddana-harini]

Thank you...it worked

[muddana-harini]

Hey Jake,
Hope you are doing good. I have 2 queries.

1. I am looking at your multi-select component but I have a big list of values to display so preferring to use multi-select from dropdown do you have any example implementations.
2. And I want to display two input values for paritulcar fields...that is when I select isinlist for particular fields I may want to show both dropdown select box and a textbox to write some other value...I have gone through some discussion but wanted to check if you can guide me through any simple solution or these.

Hoping to hear from you soon.
Thank you.

https://codesandbox.io/p/sandbox/adoring-lovelace-tsxfks?file=%2Fsrc%2FApp.js

[jakeboone02]

1. As discussed on Discord:

The website landing page has a demo of react-select, which does a nice drop-down multiselect. The code for the website demo is here, although it's a little over-complicated by itself since it's meant to integrate with the docusaurus theme and some other stuff.

2. Generally I recommend storing both values in the value property, either as an array or delimited string, and rendering two controls with a custom value editor. When one control updates, you need to call props.handleOnChange with the updated value plus the value that was not updated, not just the updated value because you will lose the value of the other control.

[muddana-harini]

1. As discussed on Discord:

The website landing page has a demo of react-select, which does a nice drop-down multiselect. The code for the website demo is here, although it's a little over-complicated by itself since it's meant to integrate with the docusaurus theme and some other stuff.

2. Generally I recommend storing both values in the value property, either as an array or delimited string, and rendering two controls with a custom value editor. When one control updates, you need to call props.handleOnChange with the updated value plus the value that was not updated, not just the updated value because you will lose the value of the other control.

for 2nd solution -->
its not about binding values to output. I am not able to customize value editor to have two input fields one selectbox and one text box for selected field and operator. That is for example ...if I select a field and operator which shows a list of dropdown I also need a text box to enter a integer value in the same row.

[jakeboone02]

A custom value editor can render anything you want. Here's an example that renders a <select> and an <input> for a particular field, with a fallback to the default value editor:

Working sandbox

const MyValueEditor = (props: ValueEditorProps) => {
  if (props.field === 'firstName') {
    const [title = 'mr', name = ''] = props.value?.split('|') ?? ['', ''];
    return (
      <div className={props.className}>
        <select
          value={title}
          onChange={e => props.handleOnChange(`${e.target.value}|${name}`)}>
          <option value="mr">Mr.</option>
          <option value="ms">Ms.</option>
          <option value="mrs">Mrs.</option>
          <option value="mx">Mx.</option>
        </select>
        <input
          type="text"
          value={name}
          onChange={e => props.handleOnChange(`${title}|${e.target.value}`)}
        />
      </div>
    );
  }
  return <ValueEditor {...props} />;
};