Is there support for multi select dropdown?

[Ashishgollamudy]

Hi guys I am checking to see if there is support for multi select dropdown like something i can pass to valueEditorType prop to make it multiselect?

Thanks

[jakeboone02]

There's not currently a way to do that without using a custom ValueEditor component and something like react-select. Do you need some example code?

[Ashishgollamudy]

@jakeboone02 Yeah could you please provide that code, Thanks!

[jakeboone02]

I didn't do a lot of testing, but it should probably look something like this:

// ValueEditor.js
import Select from "react-select";

const ValueEditor = ({ handleOnChange, value, values }) => (
  <Select onChange={handleOnChange} value={value} options={values} isMulti />
);

export default ValueEditor;

// App.js
import QueryBuilder from "react-querybuilder";
import ValueEditor from "./ValueEditor";

const App = () => (
  <QueryBuilder
    fields={[
      {
        name: "test",
        label: "Test",
        values: [
          { value: "TEST1", label: "Test 1" },
          { value: "TEST2", label: "Test 2" },
        ],
      },
    ]}
    controlElements={{ valueEditor: ValueEditor }}
    operators={[{ name: "=", label: "is" }]}
  />
);

export default App;

[MohammedAlasaad]

Nice example, but I want to apply that only for one field. is that possible? thx

[jakeboone02]

@MohammedAlasaad sure, just switch the ValueEditor based on the field name or some other identifiable property. Something like this:

// ValueEditor.js
import { ValueEditor as DefaultValueEditor } from "react-querybuilder";
import Select from "react-select";

const ValueEditor = props => {
  const { field, handleOnChange, value, values } = props;

  if (field === "test") {
    return <Select onChange={handleOnChange} value={value} options={values} isMulti />;
  }

  return <DefaultValueEditor {...props} />
};

export default ValueEditor;

[MohammedAlasaad]

Thank you @jakeboone02 👍

[MohammedAlasaad]

Is it possible to use react-select for fields and operators too ? @jakeboone02
Thanks

[jakeboone02]

@MohammedAlasaad - yes it is. Just set the controlElements.fieldSelector and controlElements.operatorSelector options in your <QueryBuilder> props to a custom component.