diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index c9297421a..01f749662 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -18,7 +18,7 @@ jobs:
       - name: Prettify code
         uses: creyD/prettier_action@v3.1
         with:
-          prettier_options: --write packages/*/src/** ./*.js examples/**/*
+          prettier_options: --write packages/*/src/** packages/*/dev/** ./*.js examples/**/*
           prettier_version: 2.6.2
           commit_message: 'Prettified code'
         env:
diff --git a/.prettierrc.json b/.prettierrc.json
index a52a3491b..2448074f4 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -6,5 +6,13 @@
   "trailingComma": "es5",
   "bracketSpacing": true,
   "bracketSameLine": true,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "overrides": [
+    {
+      "files": "examples/*/**",
+      "options": {
+        "printWidth": 80
+      }
+    }
+  ]
 }
diff --git a/examples/_template/src/index.scss b/examples/_template/src/index.scss
index c76dbdb71..96dc3eca5 100644
--- a/examples/_template/src/index.scss
+++ b/examples/_template/src/index.scss
@@ -6,7 +6,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 // __SCSS_POST__
diff --git a/examples/antd/src/index.scss b/examples/antd/src/index.scss
index e693fb993..a41767987 100644
--- a/examples/antd/src/index.scss
+++ b/examples/antd/src/index.scss
@@ -6,7 +6,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 .queryBuilder {
diff --git a/examples/basic-ts/src/App.tsx b/examples/basic-ts/src/App.tsx
index b46eb1285..0ec21d9a7 100644
--- a/examples/basic-ts/src/App.tsx
+++ b/examples/basic-ts/src/App.tsx
@@ -17,7 +17,11 @@ export const App = () => {
 
   return (
     <div>
-      <QueryBuilder fields={fields} query={query} onQueryChange={q => setQuery(q)} />
+      <QueryBuilder
+        fields={fields}
+        query={query}
+        onQueryChange={q => setQuery(q)}
+      />
       <h4>Query</h4>
       <pre>
         <code>{formatQuery(query, 'json')}</code>
diff --git a/examples/basic-ts/src/index.scss b/examples/basic-ts/src/index.scss
index 8976afdcd..655a922b9 100644
--- a/examples/basic-ts/src/index.scss
+++ b/examples/basic-ts/src/index.scss
@@ -5,5 +5,6 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
diff --git a/examples/basic/src/App.jsx b/examples/basic/src/App.jsx
index 8e561fca1..37430e9b9 100644
--- a/examples/basic/src/App.jsx
+++ b/examples/basic/src/App.jsx
@@ -15,7 +15,11 @@ export const App = () => {
 
   return (
     <div>
-      <QueryBuilder fields={fields} query={query} onQueryChange={q => setQuery(q)} />
+      <QueryBuilder
+        fields={fields}
+        query={query}
+        onQueryChange={q => setQuery(q)}
+      />
       <h4>Query</h4>
       <pre>
         <code>{formatQuery(query, 'json')}</code>
diff --git a/examples/basic/src/index.css b/examples/basic/src/index.css
index 695be9711..311f6d39f 100644
--- a/examples/basic/src/index.css
+++ b/examples/basic/src/index.css
@@ -5,5 +5,6 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
diff --git a/examples/bootstrap/src/index.scss b/examples/bootstrap/src/index.scss
index cdb432cd3..73426a509 100644
--- a/examples/bootstrap/src/index.scss
+++ b/examples/bootstrap/src/index.scss
@@ -7,7 +7,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 .queryBuilder {
diff --git a/examples/bulma/src/index.scss b/examples/bulma/src/index.scss
index aa35d5d00..d1a4a667c 100644
--- a/examples/bulma/src/index.scss
+++ b/examples/bulma/src/index.scss
@@ -8,7 +8,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 .queryBuilder {
diff --git a/examples/chakra/src/index.scss b/examples/chakra/src/index.scss
index cb4407b25..7ca0d9daa 100644
--- a/examples/chakra/src/index.scss
+++ b/examples/chakra/src/index.scss
@@ -5,7 +5,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 .queryBuilder {
diff --git a/examples/ci/index.html b/examples/ci/index.html
index 8e069ad58..7d9fb7241 100644
--- a/examples/ci/index.html
+++ b/examples/ci/index.html
@@ -2,7 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <title>React Query Builder CI</title>
   </head>
diff --git a/examples/ci/src/App.tsx b/examples/ci/src/App.tsx
index dce2c4157..f6173636a 100644
--- a/examples/ci/src/App.tsx
+++ b/examples/ci/src/App.tsx
@@ -1,17 +1,32 @@
 import { useReducer, useState } from 'react';
-import type { DefaultRuleGroupType, QueryBuilderProps } from 'react-querybuilder';
-import { defaultValidator, formatQuery, QueryBuilder } from 'react-querybuilder';
+import type {
+  DefaultRuleGroupType,
+  QueryBuilderProps,
+} from 'react-querybuilder';
+import {
+  defaultValidator,
+  formatQuery,
+  QueryBuilder,
+} from 'react-querybuilder';
 import { fields } from './fields';
 import './index.scss';
 import { initialQuery, initialQueryIC } from './initialQuery';
-import type { DefaultQBPropsNoDefaultQuery, DefaultQBPropsNoDefaultQueryIC } from './types';
+import type {
+  DefaultQBPropsNoDefaultQuery,
+  DefaultQBPropsNoDefaultQueryIC,
+} from './types';
 import { defaultOptions, optionsOrder, optionsReducer } from './utils';
 
 export const App = () => {
   const [query, setQuery] = useState(initialQuery);
   const [queryIC, setQueryIC] = useState(initialQueryIC);
   const [options, dispatch] = useReducer(optionsReducer, defaultOptions);
-  const { useValidation, independentCombinators, parseNumbers, ...commonOptions } = options;
+  const {
+    useValidation,
+    independentCombinators,
+    parseNumbers,
+    ...commonOptions
+  } = options;
   const commonProps: QueryBuilderProps<DefaultRuleGroupType> = {
     fields,
     ...commonOptions,
@@ -46,7 +61,10 @@ export const App = () => {
               type="checkbox"
               checked={options[optionName]}
               onChange={e =>
-                dispatch({ type: 'update', payload: { optionName, value: e.target.checked } })
+                dispatch({
+                  type: 'update',
+                  payload: { optionName, value: e.target.checked },
+                })
               }
             />
             {optionName}
@@ -58,7 +76,12 @@ export const App = () => {
       </h5>
       <pre>
         {JSON.stringify(
-          JSON.parse(formatQuery(queryForFormatting, { format: 'json_without_ids', parseNumbers })),
+          JSON.parse(
+            formatQuery(queryForFormatting, {
+              format: 'json_without_ids',
+              parseNumbers,
+            })
+          ),
           null,
           2
         )}
@@ -66,7 +89,10 @@ export const App = () => {
       <h5>Parameterized SQL</h5>
       <pre>
         {JSON.stringify(
-          formatQuery(queryForFormatting, { format: 'parameterized', parseNumbers }),
+          formatQuery(queryForFormatting, {
+            format: 'parameterized',
+            parseNumbers,
+          }),
           null,
           2
         )}
@@ -74,23 +100,37 @@ export const App = () => {
       <h5>Parameterized (Named) SQL</h5>
       <pre>
         {JSON.stringify(
-          formatQuery(queryForFormatting, { format: 'parameterized_named', parseNumbers }),
+          formatQuery(queryForFormatting, {
+            format: 'parameterized_named',
+            parseNumbers,
+          }),
           null,
           2
         )}
       </pre>
       <h5>SQL</h5>
-      <pre>{formatQuery(queryForFormatting, { format: 'sql', parseNumbers })}</pre>
+      <pre>
+        {formatQuery(queryForFormatting, { format: 'sql', parseNumbers })}
+      </pre>
       <h5>MongoDB</h5>
-      <pre>{formatQuery(queryForFormatting, { format: 'mongodb', parseNumbers })}</pre>
+      <pre>
+        {formatQuery(queryForFormatting, { format: 'mongodb', parseNumbers })}
+      </pre>
       <h5>CEL</h5>
-      <pre>{formatQuery(queryForFormatting, { format: 'cel', parseNumbers })}</pre>
+      <pre>
+        {formatQuery(queryForFormatting, { format: 'cel', parseNumbers })}
+      </pre>
       <h5>SpEL</h5>
-      <pre>{formatQuery(queryForFormatting, { format: 'spel', parseNumbers })}</pre>
+      <pre>
+        {formatQuery(queryForFormatting, { format: 'spel', parseNumbers })}
+      </pre>
       <h5>JsonLogic</h5>
       <pre>
         {JSON.stringify(
-          formatQuery(queryForFormatting, { format: 'jsonlogic', parseNumbers }),
+          formatQuery(queryForFormatting, {
+            format: 'jsonlogic',
+            parseNumbers,
+          }),
           null,
           2
         )}
diff --git a/examples/ci/src/utils.ts b/examples/ci/src/utils.ts
index 0edb2165f..304f4f48d 100644
--- a/examples/ci/src/utils.ts
+++ b/examples/ci/src/utils.ts
@@ -34,7 +34,10 @@ export const optionsOrder: CIOption[] = [
   'parseNumbers',
 ];
 
-export const optionsReducer = (state: CIOptions, action: CIOptionsAction): CIOptions => {
+export const optionsReducer = (
+  state: CIOptions,
+  action: CIOptionsAction
+): CIOptions => {
   const { optionName, value } = action.payload;
   return { ...state, [optionName]: value };
 };
diff --git a/examples/generateExamples.mjs b/examples/generateExamples.mjs
index a6897ea39..ced94b64a 100644
--- a/examples/generateExamples.mjs
+++ b/examples/generateExamples.mjs
@@ -151,6 +151,7 @@ for (const exampleID in configs) {
     const fileContents = (await readFile(filePath)).toString('utf-8');
     const prettified = prettier.format(fileContents, {
       ...prettierConfig,
+      printWidth: 80, // narrower since codesandbox code panel is narrow
       filepath: filePath,
       plugins: ['prettier-plugin-organize-imports'],
     });
diff --git a/examples/material/src/index.scss b/examples/material/src/index.scss
index 8976afdcd..655a922b9 100644
--- a/examples/material/src/index.scss
+++ b/examples/material/src/index.scss
@@ -5,5 +5,6 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
diff --git a/package.json b/package.json
index 4bcf48de7..ff16b3f24 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "test:watch": "jest --watch",
     "type-check": "yarn workspaces run type-check && tsc -p examples",
     "publish:demo": "yarn build && node gh-pages.publish.js",
-    "pretty-print": "prettier --write packages/*/src/** ./*.js examples/**/*",
+    "pretty-print": "prettier --write packages/*/src/** packages/*/dev/** ./*.js examples/**/*",
     "generate-changelog": "github-changes --owner react-querybuilder --repository react-querybuilder --auth --use-commit-body --only-pulls --date-format=\"(YYYY-MM-DD)\"",
     "generate-examples": "node ./examples/generateExamples.mjs"
   },
diff --git a/packages/antd/dev/main.tsx b/packages/antd/dev/main.tsx
index 63c1208ea..ead034e51 100644
--- a/packages/antd/dev/main.tsx
+++ b/packages/antd/dev/main.tsx
@@ -1,8 +1,8 @@
+import 'antd/dist/antd.compact.css';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from 'react-querybuilder/dev';
 import { antdControlElements } from '../src';
-import 'antd/dist/antd.compact.css';
 import './styles.scss';
 
 createRoot(document.getElementById('app')!).render(
diff --git a/packages/antd/dev/styles.scss b/packages/antd/dev/styles.scss
index 4ab0a0153..24af87637 100644
--- a/packages/antd/dev/styles.scss
+++ b/packages/antd/dev/styles.scss
@@ -1,3 +1,3 @@
-body {
-  margin: 1rem;
+.ant-input {
+  width: auto;
 }
diff --git a/packages/antd/src/AntD.test.tsx b/packages/antd/src/AntD.test.tsx
index 7ab17ca59..5d31b4260 100644
--- a/packages/antd/src/AntD.test.tsx
+++ b/packages/antd/src/AntD.test.tsx
@@ -1,22 +1,20 @@
-import { render, screen, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import type { SelectProps } from 'antd';
+import type { OptionProps } from 'antd/lib/select';
 import moment from 'moment';
+import type { OptionGroupFC } from 'rc-select/lib/OptGroup';
 import {
   defaultNotToggleProps,
   defaultValueEditorProps,
-  defaultValueSelectorProps,
   findInput,
   hasOrInheritsClass,
   testActionElement,
   testDragHandle,
   testValueEditor,
+  testValueSelector,
   userEventSetup,
 } from 'react-querybuilder/genericTests';
-import type {
-  NameLabelPair,
-  NotToggleProps,
-  ValueEditorProps,
-  ValueSelectorProps,
-} from 'react-querybuilder/src';
+import type { NotToggleProps, ValueEditorProps } from 'react-querybuilder/src';
 import {
   AntDActionElement,
   AntDDragHandle,
@@ -25,96 +23,39 @@ import {
   AntDValueSelector,
 } from '.';
 
-const antdValueSelectorProps: ValueSelectorProps = {
-  ...defaultValueSelectorProps,
-  title: AntDValueSelector.displayName,
-};
-const antdValueEditorProps: ValueEditorProps = {
-  ...defaultValueEditorProps,
-  type: 'select',
-  title: AntDValueEditor.displayName,
-  values: defaultValueSelectorProps.options,
-};
-
-const testAntDValueSelector = (
-  title: string,
-  Component: React.ComponentType<ValueEditorProps> | React.ComponentType<ValueSelectorProps>,
-  props: any
-) => {
-  const user = userEventSetup();
-  const testValues: NameLabelPair[] = props.values ?? props.options;
-  const testVal = testValues[1];
-
-  describe(title, () => {
-    it('should render the correct number of options', async () => {
-      render(<Component {...props} />);
-      await user.click(screen.getByRole('combobox'));
-      const listbox = within(screen.getByRole('listbox'));
-      expect(listbox.getAllByRole('option')).toHaveLength(2);
-    });
-
-    it('should have the options passed into the <select />', async () => {
-      render(<Component {...props} />);
-      await user.click(screen.getByRole('combobox'));
-      const listbox = within(screen.getByRole('listbox'));
-      expect(listbox.getAllByRole('option')[1]).toHaveTextContent(testVal.name);
-    });
-
-    if (('values' in props && props.type === 'multiselect') || 'options' in props) {
-      it('should have the values passed into the <select multiple />', () => {
-        const value = testValues.map(v => v.name).join(',');
-        const multiselectProps = 'values' in props ? { type: 'multiselect' } : { multiple: true };
-        render(<Component {...props} value={value} {...multiselectProps} />);
-        expect(
-          screen.getByTitle(props.title).querySelectorAll('.ant-select-selection-item-content')
-        ).toHaveLength(testValues.length);
-      });
-    }
-
-    if (('values' in props && props.type !== 'multiselect') || 'options' in props) {
-      it('should have the value passed into the <select />', () => {
-        render(<Component {...props} value={testVal.name} />);
-        expect(screen.getByTitle(props.title)).toHaveTextContent(testVal.label);
-      });
-    }
-
-    it('should call the onChange method passed in', async () => {
-      const handleOnChange = jest.fn();
-      render(<Component {...props} handleOnChange={handleOnChange} />);
-      await user.click(screen.getByRole('combobox'));
-      await user.click(screen.getByText(testVal.label));
-      expect(handleOnChange).toHaveBeenCalledWith(testVal.name);
-    });
-
-    it('should have the className passed into the <select />', () => {
-      render(<Component {...props} className="foo" />);
-      expect(screen.getByTitle(props.title)).toHaveClass('foo');
-    });
-
-    it('should render optgroups', async () => {
-      const optGroups = [
-        { label: 'Test Option Group', options: 'values' in props ? props.values : props.options },
-      ];
-      const newProps =
-        'values' in props ? { ...props, values: optGroups } : { ...props, options: optGroups };
-      render(<Component {...newProps} />);
-      await user.click(screen.getByRole('combobox'));
-      const listbox = within(screen.getByRole('listbox'));
-      expect(listbox.getAllByRole('option').pop()).toHaveTextContent(testVal.name);
-    });
-
-    it('should be disabled by the disabled prop', async () => {
-      const handleOnChange = jest.fn();
-      render(<Component {...props} handleOnChange={handleOnChange} disabled />);
-      expect(screen.getByRole('combobox')).toBeDisabled();
-      await user.click(screen.getByRole('combobox'));
-      expect(() => screen.getByRole('listbox')).toThrow();
-      expect(handleOnChange).not.toHaveBeenCalled();
-    });
-  });
-};
+jest.mock('antd', () => {
+  // We only mock Select. Everything else can use the real antd components.
+  const AntD = jest.requireActual('antd');
+
+  const Select = (props: SelectProps) => (
+    <select
+      multiple={props.mode === 'multiple'}
+      disabled={props.disabled}
+      value={props.value}
+      onChange={e =>
+        props.onChange!(
+          props.mode === 'multiple'
+            ? Array.from(e.target.selectedOptions).map(opt => opt.value)
+            : e.target.value,
+          {
+            label: '',
+          }
+        )
+      }>
+      {props.children}
+    </select>
+  );
+  Select.Option = ({ value, children }: OptionProps) => <option value={value}>{children}</option>;
+  Select.OptGroup = (({ label, children }) => (
+    <optgroup label={label}>{children}</optgroup>
+  )) as OptionGroupFC;
+
+  return { ...AntD, Select };
+});
 
+const valueEditorTitle = AntDValueEditor.displayName;
 const notToggleTitle = AntDNotToggle.displayName;
+
 describe(notToggleTitle, () => {
   const user = userEventSetup();
   const label = 'Not';
@@ -146,7 +87,6 @@ describe(notToggleTitle, () => {
   });
 });
 
-const valueEditorTitle = AntDValueEditor.displayName;
 describe(`${valueEditorTitle} as switch`, () => {
   const user = userEventSetup();
   const props: ValueEditorProps = {
@@ -284,16 +224,5 @@ describe(`${valueEditorTitle} date/time pickers`, () => {
 
 testActionElement(AntDActionElement);
 testDragHandle(AntDDragHandle);
-testValueEditor(AntDValueEditor, { multiselect: true, select: true, switch: true });
-const valueEditorAsSelectTitle = `${antdValueEditorProps.title} (as ValueSelector)`;
-testAntDValueSelector(valueEditorAsSelectTitle, AntDValueEditor, {
-  ...antdValueEditorProps,
-  title: valueEditorAsSelectTitle,
-});
-const valueEditorAsMultiselectTitle = `${antdValueEditorProps.title} (as ValueSelector multiselect)`;
-testAntDValueSelector(valueEditorAsMultiselectTitle, AntDValueEditor, {
-  ...antdValueEditorProps,
-  title: valueEditorAsMultiselectTitle,
-  type: 'multiselect',
-});
-testAntDValueSelector(antdValueSelectorProps.title!, AntDValueSelector, antdValueSelectorProps);
+testValueEditor(AntDValueEditor, { switch: true });
+testValueSelector(AntDValueSelector);
diff --git a/packages/antd/src/AntDValueEditor.tsx b/packages/antd/src/AntDValueEditor.tsx
index 20471543f..9b3c37da0 100644
--- a/packages/antd/src/AntDValueEditor.tsx
+++ b/packages/antd/src/AntDValueEditor.tsx
@@ -1,7 +1,13 @@
 import { Checkbox, DatePicker, Input, Radio, Switch, TimePicker } from 'antd';
 import moment from 'moment';
-import { useEffect } from 'react';
-import type { ValueEditorProps } from 'react-querybuilder';
+import {
+  joinWith,
+  splitBy,
+  standardClassnames,
+  toArray,
+  useValueEditor,
+  type ValueEditorProps,
+} from 'react-querybuilder';
 import { AntDValueSelector } from './AntDValueSelector';
 
 export const AntDValueEditor = ({
@@ -13,21 +19,14 @@ export const AntDValueEditor = ({
   className,
   type,
   inputType,
-  values,
+  values = [],
+  listsAsArrays,
   valueSource: _vs,
   disabled,
+  testID,
   ...props
 }: ValueEditorProps) => {
-  useEffect(() => {
-    if (
-      inputType === 'number' &&
-      !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&
-      typeof value === 'string' &&
-      value.includes(',')
-    ) {
-      handleOnChange('');
-    }
-  }, [inputType, operator, value, handleOnChange]);
+  useValueEditor({ handleOnChange, inputType, operator, value });
 
   if (operator === 'null' || operator === 'notNull') {
     return null;
@@ -42,6 +41,40 @@ export const AntDValueEditor = ({
       ? 'text'
       : inputType || 'text';
 
+  if ((operator === 'between' || operator === 'notBetween') && type === 'select') {
+    const valArray = toArray(value);
+    const selector1handler = (v: string) => {
+      const val = [v, valArray[1] ?? values[0]?.name, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    const selector2handler = (v: string) => {
+      const val = [valArray[0], v, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    return (
+      <span data-testid={testID} className={className} title={title}>
+        <AntDValueSelector
+          {...props}
+          className={standardClassnames.valueListItem}
+          handleOnChange={selector1handler}
+          disabled={disabled}
+          value={valArray[0]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+        <AntDValueSelector
+          {...props}
+          className={standardClassnames.valueListItem}
+          handleOnChange={selector2handler}
+          disabled={disabled}
+          value={valArray[1]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+      </span>
+    );
+  }
+
   switch (type) {
     case 'select':
     case 'multiselect':
@@ -50,11 +83,12 @@ export const AntDValueEditor = ({
           {...props}
           className={className}
           handleOnChange={handleOnChange}
-          options={values!}
+          options={values}
           value={value}
           title={title}
           disabled={disabled}
           multiple={type === 'multiselect'}
+          listsAsArrays={listsAsArrays}
         />
       );
 
@@ -96,7 +130,7 @@ export const AntDValueEditor = ({
     case 'radio':
       return (
         <span className={className} title={title}>
-          {values!.map(v => (
+          {values.map(v => (
             <Radio
               key={v.name}
               value={v.name}
@@ -117,7 +151,7 @@ export const AntDValueEditor = ({
         <DatePicker.RangePicker
           value={
             typeof value === 'string' && /^[^,]+,[^,]+$/.test(value)
-              ? (value.split(',').map(v => moment(v)) as [moment.Moment, moment.Moment])
+              ? (splitBy(value, ',').map(v => moment(v)) as [moment.Moment, moment.Moment])
               : undefined
           }
           showTime={inputTypeCoerced === 'datetime-local'}
diff --git a/packages/antd/src/AntDValueSelector.tsx b/packages/antd/src/AntDValueSelector.tsx
index 31044e2d1..9c17f6b79 100644
--- a/packages/antd/src/AntDValueSelector.tsx
+++ b/packages/antd/src/AntDValueSelector.tsx
@@ -1,6 +1,6 @@
 import { Select } from 'antd';
 import { useMemo, type ComponentPropsWithoutRef } from 'react';
-import type { VersatileSelectorProps } from 'react-querybuilder';
+import { joinWith, splitBy, type VersatileSelectorProps } from 'react-querybuilder';
 import { toOptions } from './utils';
 
 type AntDValueSelectorProps = VersatileSelectorProps &
@@ -14,6 +14,7 @@ export const AntDValueSelector = ({
   title,
   disabled,
   multiple,
+  listsAsArrays,
   // Props that should not be in extraProps
   testID: _testID,
   rules: _rules,
@@ -26,18 +27,25 @@ export const AntDValueSelector = ({
   fieldData: _fieldData,
   ...extraProps
 }: AntDValueSelectorProps) => {
-  const onChange = useMemo(() => {
-    if (multiple) {
-      return (v: string | string[]) =>
-        handleOnChange(Array.isArray(v) ? v.join(',') : /* istanbul ignore next */ v);
-    }
-    return (v: string) => handleOnChange(v);
-  }, [handleOnChange, multiple]);
+  const onChange = useMemo(
+    () =>
+      multiple
+        ? (v: string | string[]) =>
+            handleOnChange(
+              Array.isArray(v)
+                ? listsAsArrays
+                  ? v
+                  : joinWith(v, ',')
+                : /* istanbul ignore next */ v
+            )
+        : (v: string) => handleOnChange(v),
+    [handleOnChange, listsAsArrays, multiple]
+  );
 
   const val = multiple
     ? Array.isArray(value)
       ? /* istanbul ignore next */ value
-      : value?.split(',')
+      : splitBy(value, ',')
     : value;
 
   const modeObj = multiple ? { mode: 'multiple' as const } : {};
diff --git a/packages/bootstrap/dev/styles.scss b/packages/bootstrap/dev/styles.scss
index 3b7937fcc..0ee5b1afa 100644
--- a/packages/bootstrap/dev/styles.scss
+++ b/packages/bootstrap/dev/styles.scss
@@ -2,10 +2,6 @@ $code-color: #333333;
 
 @import 'bootstrap/scss/bootstrap.scss';
 
-body {
-  margin: 1rem;
-}
-
 #app > div:first-child > label > input {
   margin: 3px;
 }
diff --git a/packages/bootstrap/src/BootstrapValueEditor.tsx b/packages/bootstrap/src/BootstrapValueEditor.tsx
index 8390e1ac1..bfe5cc4a1 100644
--- a/packages/bootstrap/src/BootstrapValueEditor.tsx
+++ b/packages/bootstrap/src/BootstrapValueEditor.tsx
@@ -1,5 +1,11 @@
-import { useEffect } from 'react';
-import { ValueSelector, type ValueEditorProps } from 'react-querybuilder';
+import {
+  joinWith,
+  standardClassnames as sc,
+  toArray,
+  useValueEditor,
+  ValueSelector,
+  type ValueEditorProps,
+} from 'react-querybuilder';
 
 export const BootstrapValueEditor = ({
   fieldData,
@@ -10,20 +16,13 @@ export const BootstrapValueEditor = ({
   className,
   type,
   inputType,
-  values,
+  values = [],
+  listsAsArrays,
   disabled,
+  testID,
   ...props
 }: ValueEditorProps) => {
-  useEffect(() => {
-    if (
-      inputType === 'number' &&
-      !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&
-      typeof value === 'string' &&
-      value.includes(',')
-    ) {
-      handleOnChange('');
-    }
-  }, [inputType, operator, value, handleOnChange]);
+  useValueEditor({ handleOnChange, inputType, operator, value });
 
   if (operator === 'null' || operator === 'notNull') {
     return null;
@@ -34,6 +33,40 @@ export const BootstrapValueEditor = ({
     ? 'text'
     : inputType || 'text';
 
+  if ((operator === 'between' || operator === 'notBetween') && type === 'select') {
+    const valArray = toArray(value);
+    const selector1handler = (v: string) => {
+      const val = [v, valArray[1] ?? values[0]?.name, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    const selector2handler = (v: string) => {
+      const val = [valArray[0], v, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    return (
+      <span data-testid={testID} className={className} title={title}>
+        <ValueSelector
+          {...props}
+          className={`${sc.valueListItem} ${className?.replaceAll(sc.value, '')}`}
+          handleOnChange={selector1handler}
+          disabled={disabled}
+          value={valArray[0]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+        <ValueSelector
+          {...props}
+          className={`${sc.valueListItem} ${className?.replaceAll(sc.value, '')}`}
+          handleOnChange={selector2handler}
+          disabled={disabled}
+          value={valArray[1]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+      </span>
+    );
+  }
+
   switch (type) {
     case 'select':
     case 'multiselect':
@@ -46,7 +79,8 @@ export const BootstrapValueEditor = ({
           value={value}
           disabled={disabled}
           multiple={type === 'multiselect'}
-          options={values!}
+          listsAsArrays={listsAsArrays}
+          options={values}
         />
       );
 
@@ -91,7 +125,7 @@ export const BootstrapValueEditor = ({
     case 'radio':
       return (
         <span title={title}>
-          {values!.map(v => (
+          {values.map(v => (
             <div key={v.name} className="form-check form-check-inline">
               <input
                 className="form-check-input"
diff --git a/packages/bulma/dev/styles.scss b/packages/bulma/dev/styles.scss
index 65be0067c..28ea76b14 100644
--- a/packages/bulma/dev/styles.scss
+++ b/packages/bulma/dev/styles.scss
@@ -3,10 +3,6 @@ $code-background: unset;
 
 @import 'bulma/bulma.sass';
 
-body {
-  margin: 1rem;
-}
-
 pre {
   white-space: pre-wrap;
 }
diff --git a/packages/bulma/src/BulmaValueEditor.tsx b/packages/bulma/src/BulmaValueEditor.tsx
index 8821e9f06..c43c98472 100644
--- a/packages/bulma/src/BulmaValueEditor.tsx
+++ b/packages/bulma/src/BulmaValueEditor.tsx
@@ -1,5 +1,10 @@
-import { useEffect } from 'react';
-import type { ValueEditorProps } from 'react-querybuilder';
+import {
+  joinWith,
+  standardClassnames,
+  toArray,
+  useValueEditor,
+  type ValueEditorProps,
+} from 'react-querybuilder';
 import { BulmaValueSelector } from './BulmaValueSelector';
 
 export const BulmaValueEditor = ({
@@ -11,20 +16,13 @@ export const BulmaValueEditor = ({
   className,
   type,
   inputType,
-  values,
+  values = [],
+  listsAsArrays,
   disabled,
+  testID,
   ...props
 }: ValueEditorProps) => {
-  useEffect(() => {
-    if (
-      inputType === 'number' &&
-      !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&
-      typeof value === 'string' &&
-      value.includes(',')
-    ) {
-      handleOnChange('');
-    }
-  }, [inputType, operator, value, handleOnChange]);
+  useValueEditor({ handleOnChange, inputType, operator, value });
 
   if (operator === 'null' || operator === 'notNull') {
     return null;
@@ -35,6 +33,40 @@ export const BulmaValueEditor = ({
     ? 'text'
     : inputType || 'text';
 
+  if ((operator === 'between' || operator === 'notBetween') && type === 'select') {
+    const valArray = toArray(value);
+    const selector1handler = (v: string) => {
+      const val = [v, valArray[1] ?? values[0]?.name, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    const selector2handler = (v: string) => {
+      const val = [valArray[0], v, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    return (
+      <span data-testid={testID} className={className} title={title}>
+        <BulmaValueSelector
+          {...props}
+          className={standardClassnames.valueListItem}
+          handleOnChange={selector1handler}
+          disabled={disabled}
+          value={valArray[0]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+        <BulmaValueSelector
+          {...props}
+          className={standardClassnames.valueListItem}
+          handleOnChange={selector2handler}
+          disabled={disabled}
+          value={valArray[1]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+      </span>
+    );
+  }
+
   switch (type) {
     case 'select':
     case 'multiselect':
@@ -44,10 +76,11 @@ export const BulmaValueEditor = ({
           title={title}
           className={className}
           handleOnChange={handleOnChange}
-          options={values!}
+          options={values}
           value={value}
           disabled={disabled}
           multiple={type === 'multiselect'}
+          listsAsArrays={listsAsArrays}
         />
       );
 
@@ -81,7 +114,7 @@ export const BulmaValueEditor = ({
     case 'radio':
       return (
         <div className={`${className} control`} title={title}>
-          {values!.map(v => (
+          {values.map(v => (
             <label key={v.name} className="radio">
               <input
                 type="radio"
diff --git a/packages/bulma/src/BulmaValueSelector.tsx b/packages/bulma/src/BulmaValueSelector.tsx
index 768081983..b33d68ab0 100644
--- a/packages/bulma/src/BulmaValueSelector.tsx
+++ b/packages/bulma/src/BulmaValueSelector.tsx
@@ -1,5 +1,5 @@
 import { useMemo, type ChangeEvent } from 'react';
-import type { ValueSelectorProps } from 'react-querybuilder';
+import { joinWith, splitBy, type ValueSelectorProps } from 'react-querybuilder';
 import { toOptions } from './utils';
 
 export const BulmaValueSelector = ({
@@ -10,27 +10,24 @@ export const BulmaValueSelector = ({
   title,
   disabled,
   multiple,
+  listsAsArrays,
 }: ValueSelectorProps) => {
-  const onChange = useMemo(() => {
-    if (multiple) {
-      return (e: ChangeEvent<HTMLSelectElement>) =>
-        handleOnChange(
-          [...e.target.options]
-            .filter(o => o.selected)
-            .map(o => o.value)
-            .join(',')
-        );
-    }
-    return (e: ChangeEvent<HTMLSelectElement>) => handleOnChange(e.target.value);
-  }, [handleOnChange, multiple]);
+  const onChange = useMemo(
+    () =>
+      multiple
+        ? (e: ChangeEvent<HTMLSelectElement>) => {
+            const valArray = Array.from(e.target.selectedOptions).map(o => o.value);
+            handleOnChange(listsAsArrays ? valArray : joinWith(valArray, ','));
+          }
+        : (e: ChangeEvent<HTMLSelectElement>) => handleOnChange(e.target.value),
+    [handleOnChange, listsAsArrays, multiple]
+  );
+
+  const val = multiple ? (Array.isArray(value) ? value : splitBy(value, ',')) : value;
 
   return (
     <div title={title} className={`${className} select is-small`}>
-      <select
-        value={multiple && value ? value.split(',') : value}
-        multiple={!!multiple}
-        disabled={disabled}
-        onChange={onChange}>
+      <select value={val} multiple={!!multiple} disabled={disabled} onChange={onChange}>
         {toOptions(options)}
       </select>
     </div>
diff --git a/packages/chakra/dev/styles.scss b/packages/chakra/dev/styles.scss
index 31952841e..9b9046bfc 100644
--- a/packages/chakra/dev/styles.scss
+++ b/packages/chakra/dev/styles.scss
@@ -1,7 +1,3 @@
-body {
-  margin: 1rem !important;
-}
-
 .chakra-select__wrapper {
   width: fit-content !important;
   display: inline-block;
diff --git a/packages/chakra/src/Chakra.test.tsx b/packages/chakra/src/Chakra.test.tsx
index 77565a014..2cb10b668 100644
--- a/packages/chakra/src/Chakra.test.tsx
+++ b/packages/chakra/src/Chakra.test.tsx
@@ -1,5 +1,5 @@
 import { theme, ThemeProvider } from '@chakra-ui/react';
-import { forwardRef } from 'react';
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
 import {
   testActionElement,
   testDragHandle,
@@ -17,7 +17,7 @@ import {
 } from '.';
 
 const generateWrapper = (RQBComponent: any) => {
-  const Wrapper = (props: any) => (
+  const Wrapper = (props: ComponentPropsWithoutRef<typeof RQBComponent>) => (
     <ThemeProvider theme={theme}>
       <RQBComponent {...props} />
     </ThemeProvider>
diff --git a/packages/chakra/src/ChakraValueEditor.tsx b/packages/chakra/src/ChakraValueEditor.tsx
index 3593b518d..5b49a38dc 100644
--- a/packages/chakra/src/ChakraValueEditor.tsx
+++ b/packages/chakra/src/ChakraValueEditor.tsx
@@ -1,6 +1,12 @@
 import { Checkbox, Input, Radio, RadioGroup, Stack, Switch, Textarea } from '@chakra-ui/react';
-import { useEffect } from 'react';
-import { ValueSelector, type ValueEditorProps } from 'react-querybuilder';
+import {
+  joinWith,
+  standardClassnames,
+  toArray,
+  useValueEditor,
+  ValueSelector,
+  type ValueEditorProps,
+} from 'react-querybuilder';
 import { ChakraValueSelector } from './ChakraValueSelector';
 
 export const ChakraValueEditor = ({
@@ -12,22 +18,14 @@ export const ChakraValueEditor = ({
   className,
   type,
   inputType,
-  values,
+  values = [],
+  listsAsArrays,
   valueSource: _vs,
-  testID: _t,
+  testID,
   disabled,
   ...props
 }: ValueEditorProps) => {
-  useEffect(() => {
-    if (
-      inputType === 'number' &&
-      !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&
-      typeof value === 'string' &&
-      value.includes(',')
-    ) {
-      handleOnChange('');
-    }
-  }, [inputType, operator, value, handleOnChange]);
+  useValueEditor({ handleOnChange, inputType, operator, value });
 
   if (operator === 'null' || operator === 'notNull') {
     return null;
@@ -38,6 +36,40 @@ export const ChakraValueEditor = ({
     ? 'text'
     : inputType || 'text';
 
+  if ((operator === 'between' || operator === 'notBetween') && type === 'select') {
+    const valArray = toArray(value);
+    const selector1handler = (v: string) => {
+      const val = [v, valArray[1] ?? values[0]?.name, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    const selector2handler = (v: string) => {
+      const val = [valArray[0], v, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    return (
+      <span data-testid={testID} className={className} title={title}>
+        <ChakraValueSelector
+          {...props}
+          className={standardClassnames.valueListItem}
+          handleOnChange={selector1handler}
+          disabled={disabled}
+          value={valArray[0]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+        <ChakraValueSelector
+          {...props}
+          className={standardClassnames.valueListItem}
+          handleOnChange={selector2handler}
+          disabled={disabled}
+          value={valArray[1]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+      </span>
+    );
+  }
+
   switch (type) {
     case 'select':
       return (
@@ -48,7 +80,7 @@ export const ChakraValueEditor = ({
           value={value}
           disabled={disabled}
           handleOnChange={handleOnChange}
-          options={values!}
+          options={values}
         />
       );
 
@@ -61,8 +93,9 @@ export const ChakraValueEditor = ({
           value={value}
           disabled={disabled}
           handleOnChange={handleOnChange}
-          options={values!}
+          options={values}
           multiple
+          listsAsArrays={listsAsArrays}
         />
       );
 
@@ -113,7 +146,7 @@ export const ChakraValueEditor = ({
           onChange={handleOnChange}
           isDisabled={disabled}>
           <Stack direction="row">
-            {values!.map(v => (
+            {values.map(v => (
               <Radio key={v.name} value={v.name} size="sm">
                 {v.label}
               </Radio>
diff --git a/packages/chakra/src/ChakraValueSelector.tsx b/packages/chakra/src/ChakraValueSelector.tsx
index 8abcb6a13..5bd95777b 100644
--- a/packages/chakra/src/ChakraValueSelector.tsx
+++ b/packages/chakra/src/ChakraValueSelector.tsx
@@ -23,6 +23,7 @@ export const ChakraValueSelector = ({
   field: _field,
   fieldData: _fieldData,
   multiple: _multiple,
+  listsAsArrays: _listsAsArrays,
   ...extraProps
 }: ChakraValueSelectorProps) => (
   <Select
diff --git a/packages/material/src/Material.test.tsx b/packages/material/src/Material.test.tsx
index 56191198d..b9a83074a 100644
--- a/packages/material/src/Material.test.tsx
+++ b/packages/material/src/Material.test.tsx
@@ -1,22 +1,25 @@
+import type {
+  FormControlProps,
+  ListSubheaderProps,
+  MenuItemProps,
+  SelectChangeEvent,
+  SelectProps,
+} from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { render, screen, within } from '@testing-library/react';
-import { forwardRef } from 'react';
 import {
-  defaultValueEditorProps,
-  defaultValueSelectorProps,
+  cloneElement as mockCloneElement,
+  forwardRef,
+  isValidElement as mockIsValidElement,
+  type ComponentPropsWithoutRef,
+} from 'react';
+import {
   testActionElement,
   testDragHandle,
   testNotToggle,
   testValueEditor,
-  userEventSetup,
+  testValueSelector,
 } from 'react-querybuilder/genericTests';
-import type {
-  DragHandleProps,
-  NameLabelPair,
-  OptionGroup,
-  ValueEditorProps,
-  ValueSelectorProps,
-} from 'react-querybuilder/src';
+import type { DragHandleProps } from 'react-querybuilder/src';
 import 'regenerator-runtime/runtime';
 import {
   MaterialActionElement,
@@ -26,9 +29,52 @@ import {
   MaterialValueSelector,
 } from '.';
 
+jest.mock('@mui/material', () => {
+  const MuiMaterial = jest.requireActual('@mui/material');
+  const ListSubheader = ({ children }: ListSubheaderProps) => (
+    <optgroup label={children as string} />
+  );
+  const MenuItem = ({ value, children }: MenuItemProps) => (
+    <option value={value}>{children}</option>
+  );
+  return { ...MuiMaterial, ListSubheader, MenuItem };
+});
+jest.mock('@mui/material/FormControl', () => {
+  const FormControl = ({ className, disabled, title, children }: FormControlProps) => (
+    <div className={className} title={title}>
+      {mockIsValidElement(children) ? mockCloneElement(children, { disabled }) : children}
+    </div>
+  );
+  FormControl.useFormControl = () => {};
+  return FormControl;
+});
+jest.mock('@mui/material/Select', () => {
+  const Select = (props: SelectProps<string | string[]>) => (
+    <select
+      disabled={!!props.disabled}
+      multiple={!!props.multiple}
+      value={props.value}
+      onChange={e =>
+        props.onChange!(
+          {
+            target: {
+              value: props.multiple
+                ? Array.from(e.target.selectedOptions).map(opt => opt.value)
+                : e.target.value,
+            },
+          } as SelectChangeEvent<string | string[]>,
+          ''
+        )
+      }>
+      {props.children}
+    </select>
+  );
+  return Select;
+});
+
 const theme = createTheme();
 const generateWrapper = (RQBComponent: any) => {
-  const Wrapper = (props: any) => (
+  const Wrapper = (props: ComponentPropsWithoutRef<typeof RQBComponent>) => (
     <ThemeProvider theme={theme}>
       <RQBComponent {...props} />
     </ThemeProvider>
@@ -43,122 +89,8 @@ const WrapperDH = forwardRef<HTMLSpanElement, DragHandleProps>((props, ref) => (
 ));
 WrapperDH.displayName = MaterialDragHandle.displayName;
 
-const materialValueSelectorProps: ValueSelectorProps = {
-  ...defaultValueSelectorProps,
-  title: MaterialValueSelector.displayName,
-};
-const materialValueEditorProps: ValueEditorProps = {
-  ...defaultValueEditorProps,
-  type: 'select',
-  title: MaterialValueEditor.displayName,
-  values: defaultValueSelectorProps.options,
-};
-
-const testMaterialValueSelector = (
-  title: string,
-  Component: React.ComponentType<ValueEditorProps> | React.ComponentType<ValueSelectorProps>,
-  props: any
-) => {
-  const user = userEventSetup();
-  const testValues: NameLabelPair[] = props.values ?? props.options;
-  const [firstNameLabel, secondNameLabel] = testValues;
-  const isMulti = ('values' in props && props.type === 'multiselect') || props.multiple;
-
-  describe(title, () => {
-    it('should render the correct number of options', async () => {
-      render(<Component {...props} value={firstNameLabel.name} />);
-      await user.click(screen.getByRole('button'));
-      const listbox = within(screen.getByRole('listbox'));
-      expect(listbox.getAllByRole('option')).toHaveLength(2);
-    });
-
-    it('should have the options passed into the <select />', async () => {
-      render(<Component {...props} value={firstNameLabel.name} />);
-      await user.click(screen.getByRole('button'));
-      const listbox = within(screen.getByRole('listbox'));
-      expect(() => listbox.getByText(secondNameLabel.label)).not.toThrow();
-    });
-
-    if (('values' in props && props.type === 'multiselect') || 'options' in props) {
-      it('should have the values passed into the <select multiple />', () => {
-        const value = testValues.map(v => v.name).join(',');
-        const multiselectProps = 'values' in props ? { type: 'multiselect' } : { multiple: true };
-        render(<Component {...props} value={value} {...multiselectProps} />);
-        expect(screen.getByTitle(title)).toHaveTextContent(testValues.map(v => v.label).join(', '));
-      });
-    }
-    if (('values' in props && props.type !== 'multiselect') || 'options' in props) {
-      it('should have the value passed into the <select />', () => {
-        render(<Component {...props} value={secondNameLabel.name} />);
-        expect(screen.getByTitle(props.title)).toHaveTextContent(secondNameLabel.label);
-      });
-    }
-
-    it('should call the onChange method passed in', async () => {
-      const handleOnChange = jest.fn();
-      render(<Component {...props} value={firstNameLabel.name} handleOnChange={handleOnChange} />);
-      await user.click(screen.getByRole('button'));
-      const listbox = within(screen.getByRole('listbox'));
-      await user.click(listbox.getByText(secondNameLabel.label));
-      expect(handleOnChange).toHaveBeenCalledWith(
-        isMulti ? `${firstNameLabel.name},${secondNameLabel.name}` : secondNameLabel.name
-      );
-    });
-
-    it('should have the className passed into the <select />', () => {
-      render(<Component {...props} className="foo" value={firstNameLabel.name} />);
-      expect(screen.getByTitle(props.title)).toHaveClass('foo');
-    });
-
-    it('should render optgroups', async () => {
-      const optGroups: OptionGroup[] = [
-        { label: 'Test Option Group', options: props.values ?? props.options },
-      ];
-      const newProps = { ...props, values: optGroups, options: optGroups };
-      render(<Component {...newProps} value={isMulti ? [] : undefined} />);
-      await user.click(screen.getByRole('button'));
-      const listbox = within(screen.getByRole('listbox'));
-      expect(() => listbox.getByText(secondNameLabel.label)).not.toThrow();
-      expect(screen.getByRole('listbox').querySelectorAll('li')).toHaveLength(3);
-      expect(listbox.getAllByRole('option')).toHaveLength(3);
-      expect(listbox.getAllByRole('option')[2]).toHaveTextContent(secondNameLabel.label);
-    });
-
-    it('should be disabled by the disabled prop', async () => {
-      const handleOnChange = jest.fn();
-      render(
-        <Component
-          {...props}
-          handleOnChange={handleOnChange}
-          disabled
-          value={firstNameLabel.name}
-        />
-      );
-      expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
-      await user.click(screen.getByRole('button'));
-      expect(() => screen.getByRole('listbox')).toThrow();
-      expect(handleOnChange).not.toHaveBeenCalled();
-    });
-  });
-};
-
 testActionElement(generateWrapper(MaterialActionElement));
 testDragHandle(WrapperDH);
 testNotToggle(generateWrapper(MaterialNotToggle));
-testValueEditor(generateWrapper(MaterialValueEditor), { select: true, multiselect: true });
-const valueEditorAsSelectTitle = `${materialValueEditorProps.title} (as ValueSelector)`;
-testMaterialValueSelector(valueEditorAsSelectTitle, MaterialValueEditor, {
-  ...materialValueEditorProps,
-  title: valueEditorAsSelectTitle,
-});
-const valueEditorAsMultiselectTitle = `${materialValueEditorProps.title} (as ValueSelector multiselect)`;
-testMaterialValueSelector(valueEditorAsMultiselectTitle, MaterialValueEditor, {
-  ...materialValueEditorProps,
-  title: valueEditorAsMultiselectTitle,
-  type: 'multiselect',
-});
-testMaterialValueSelector(
-  materialValueSelectorProps.title!,
-  MaterialValueSelector,
-  materialValueSelectorProps
-);
+testValueEditor(generateWrapper(MaterialValueEditor));
+testValueSelector(generateWrapper(MaterialValueSelector));
diff --git a/packages/material/src/MaterialValueEditor.tsx b/packages/material/src/MaterialValueEditor.tsx
index c6a594f11..3fe6a56cf 100644
--- a/packages/material/src/MaterialValueEditor.tsx
+++ b/packages/material/src/MaterialValueEditor.tsx
@@ -6,8 +6,13 @@ import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import Switch from '@mui/material/Switch';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
-import { useEffect } from 'react';
-import type { ValueEditorProps } from 'react-querybuilder';
+import {
+  joinWith,
+  standardClassnames,
+  toArray,
+  useValueEditor,
+  type ValueEditorProps,
+} from 'react-querybuilder';
 import { MaterialValueSelector } from './MaterialValueSelector';
 
 export const MaterialValueEditor = ({
@@ -19,21 +24,14 @@ export const MaterialValueEditor = ({
   className,
   type,
   inputType,
-  values,
+  values = [],
+  listsAsArrays,
   valueSource: _vs,
   disabled,
+  testID,
   ...props
 }: ValueEditorProps) => {
-  useEffect(() => {
-    if (
-      inputType === 'number' &&
-      !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&
-      typeof value === 'string' &&
-      value.includes(',')
-    ) {
-      handleOnChange('');
-    }
-  }, [inputType, operator, value, handleOnChange]);
+  useValueEditor({ handleOnChange, inputType, operator, value });
 
   if (operator === 'null' || operator === 'notNull') {
     return null;
@@ -44,6 +42,40 @@ export const MaterialValueEditor = ({
     ? 'text'
     : inputType || 'text';
 
+  if ((operator === 'between' || operator === 'notBetween') && type === 'select') {
+    const valArray = toArray(value);
+    const selector1handler = (v: string) => {
+      const val = [v, valArray[1] ?? values[0]?.name, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    const selector2handler = (v: string) => {
+      const val = [valArray[0], v, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    return (
+      <span data-testid={testID} className={className} title={title}>
+        <MaterialValueSelector
+          {...props}
+          className={standardClassnames.valueListItem}
+          handleOnChange={selector1handler}
+          disabled={disabled}
+          value={valArray[0]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+        <MaterialValueSelector
+          {...props}
+          className={standardClassnames.valueListItem}
+          handleOnChange={selector2handler}
+          disabled={disabled}
+          value={valArray[1] ?? ''}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+      </span>
+    );
+  }
+
   switch (type) {
     case 'select':
     case 'multiselect':
@@ -52,11 +84,12 @@ export const MaterialValueEditor = ({
           {...props}
           className={className}
           handleOnChange={handleOnChange}
-          options={values!}
+          options={values}
           value={value}
           disabled={disabled}
           title={title}
           multiple={type === 'multiselect'}
+          listsAsArrays={listsAsArrays}
         />
       );
 
@@ -98,8 +131,14 @@ export const MaterialValueEditor = ({
       return (
         <FormControl className={className} title={title} component="fieldset" disabled={disabled}>
           <RadioGroup value={value} onChange={e => handleOnChange(e.target.value)}>
-            {values!.map(v => (
-              <FormControlLabel key={v.name} value={v.name} control={<Radio />} label={v.label} />
+            {values.map(v => (
+              <FormControlLabel
+                disabled={disabled}
+                key={v.name}
+                value={v.name}
+                control={<Radio />}
+                label={v.label}
+              />
             ))}
           </RadioGroup>
         </FormControl>
diff --git a/packages/material/src/MaterialValueSelector.tsx b/packages/material/src/MaterialValueSelector.tsx
index a61194685..2ff54413c 100644
--- a/packages/material/src/MaterialValueSelector.tsx
+++ b/packages/material/src/MaterialValueSelector.tsx
@@ -1,7 +1,7 @@
 import FormControl from '@mui/material/FormControl';
 import Select, { type SelectChangeEvent } from '@mui/material/Select';
 import { useMemo, type ComponentPropsWithoutRef } from 'react';
-import type { VersatileSelectorProps } from 'react-querybuilder';
+import { joinWith, splitBy, type VersatileSelectorProps } from 'react-querybuilder';
 import { toOptions } from './utils';
 
 type MaterialValueSelectorProps = VersatileSelectorProps & ComponentPropsWithoutRef<typeof Select>;
@@ -14,6 +14,7 @@ export const MaterialValueSelector = ({
   disabled,
   title,
   multiple,
+  listsAsArrays,
   // Props that should not be in extraProps
   testID: _testID,
   rules: _rules,
@@ -26,15 +27,22 @@ export const MaterialValueSelector = ({
   fieldData: _fieldData,
   ...extraProps
 }: MaterialValueSelectorProps) => {
-  const onChange = useMemo(() => {
-    if (multiple) {
-      return ({ target: { value: v } }: SelectChangeEvent<string | string[]>) =>
-        handleOnChange(Array.isArray(v) ? v.join(',') : /* istanbul ignore next */ v);
-    }
-    return ({ target: { value: v } }: SelectChangeEvent<string>) => handleOnChange(v);
-  }, [handleOnChange, multiple]);
+  const onChange = useMemo(
+    () =>
+      multiple
+        ? ({ target: { value: v } }: SelectChangeEvent<string | string[]>) =>
+            handleOnChange(
+              Array.isArray(v)
+                ? listsAsArrays
+                  ? v
+                  : joinWith(v, ',')
+                : /* istanbul ignore next */ v
+            )
+        : ({ target: { value: v } }: SelectChangeEvent<string>) => handleOnChange(v),
+    [handleOnChange, listsAsArrays, multiple]
+  );
 
-  const val = multiple ? (Array.isArray(value) ? value : value?.split(',')) : value;
+  const val = multiple ? (Array.isArray(value) ? value : splitBy(value, ',')) : value;
 
   return (
     <FormControl variant="standard" className={className} title={title} disabled={disabled}>
diff --git a/packages/react-querybuilder/dev/constants.ts b/packages/react-querybuilder/dev/constants.ts
index bc0e9a077..c22b13926 100644
--- a/packages/react-querybuilder/dev/constants.ts
+++ b/packages/react-querybuilder/dev/constants.ts
@@ -1,5 +1,6 @@
 import {
   convertToIC,
+  defaultOperators,
   type ExportFormat,
   type Field,
   type RuleGroupType,
@@ -23,6 +24,7 @@ export const defaultOptions: DemoOptions = {
   addRuleToNewGroups: false,
   validateQuery: false,
   independentCombinators: false,
+  listsAsArrays: false,
   enableDragAndDrop: false,
   disabled: false,
   debugMode: false,
@@ -41,6 +43,7 @@ export const optionOrder: DemoOption[] = [
   'addRuleToNewGroups',
   'validateQuery',
   'independentCombinators',
+  'listsAsArrays',
   'enableDragAndDrop',
   'disabled',
   'debugMode',
@@ -106,6 +109,11 @@ export const optionsMetadata: Record<
     label: 'Independent combinators',
     title: 'Combinators between rules can be independently updated',
   },
+  listsAsArrays: {
+    link: '/docs/api/querybuilder#listsasarrays',
+    label: 'Lists as arrays',
+    title: 'Lists will be stored as arrays instead of comma-separated strings',
+  },
   enableDragAndDrop: {
     link: '/docs/api/querybuilder#enabledraganddrop',
     label: 'Enable drag-and-drop',
@@ -152,21 +160,29 @@ export const fields: Field[] = [
     name: 'isMusician',
     label: 'Is a musician',
     valueEditorType: 'checkbox',
-    operators: [{ name: '=', label: 'is' }],
+    operators: defaultOperators.filter(op => op.name === '='),
     defaultValue: false,
   },
   {
     name: 'instrument',
-    label: 'Instrument',
+    label: 'Primary instrument',
     valueEditorType: 'select',
     values: musicalInstruments,
     defaultValue: 'Piano',
-    operators: [{ name: '=', label: 'is' }],
+    operators: defaultOperators.filter(op => op.name === '=' || op.name === 'in'),
+  },
+  {
+    name: 'alsoPlaysInstruments',
+    label: 'Also plays instruments',
+    valueEditorType: 'multiselect',
+    values: musicalInstruments,
+    defaultValue: 'Guitar',
+    operators: defaultOperators.filter(op => op.name === 'in'),
   },
   {
     name: 'gender',
     label: 'Gender',
-    operators: [{ name: '=', label: 'is' }],
+    operators: defaultOperators.filter(op => op.name === '='),
     valueEditorType: 'radio',
     values: [
       { name: 'M', label: 'Male' },
diff --git a/packages/react-querybuilder/dev/styles.scss b/packages/react-querybuilder/dev/styles.scss
index 4a8d0476b..2cc0af30c 100644
--- a/packages/react-querybuilder/dev/styles.scss
+++ b/packages/react-querybuilder/dev/styles.scss
@@ -1,5 +1,9 @@
 @import '../src/query-builder.scss';
 
+body {
+  margin: 0;
+}
+
 pre {
   margin: 0;
   white-space: pre-wrap;
@@ -10,6 +14,7 @@ pre {
 }
 
 #app {
+  margin: 1rem;
   display: flex;
   justify-content: space-between;
   column-gap: 1.5rem;
diff --git a/packages/react-querybuilder/dev/types.ts b/packages/react-querybuilder/dev/types.ts
index 0dc0bef63..096f21b56 100644
--- a/packages/react-querybuilder/dev/types.ts
+++ b/packages/react-querybuilder/dev/types.ts
@@ -12,6 +12,7 @@ export type DemoOption =
   | 'addRuleToNewGroups'
   | 'validateQuery'
   | 'independentCombinators'
+  | 'listsAsArrays'
   | 'enableDragAndDrop'
   | 'disabled'
   | 'debugMode'
diff --git a/packages/react-querybuilder/genericTests/testValueEditor.tsx b/packages/react-querybuilder/genericTests/testValueEditor.tsx
index 00d38b25d..018973e71 100644
--- a/packages/react-querybuilder/genericTests/testValueEditor.tsx
+++ b/packages/react-querybuilder/genericTests/testValueEditor.tsx
@@ -11,6 +11,7 @@ type ValueEditorTestsToSkip = Partial<{
   radio: boolean;
   textarea: boolean;
   switch: boolean;
+  betweenSelect: boolean;
 }>;
 interface ValueEditorAsSelectProps extends ValueEditorProps {
   values: NameLabelPair[] | OptionGroup[];
@@ -85,8 +86,9 @@ export const testValueEditor = (
           expect(findInput(screen.getByTitle(title))).toHaveAttribute('type', 'text');
         });
 
-        it('should set the value to "" if operator is not "between" or "notBetween" and inputType is "number" and value contains a comma', () => {
+        it('should trim the value if operator is not "between"/"in", inputType is "number", and value contains a comma', () => {
           const handleOnChange = jest.fn();
+          let callCount = 0;
           const { rerender } = render(
             <ValueEditor
               {...props}
@@ -106,6 +108,8 @@ export const testValueEditor = (
             />
           );
           expect(handleOnChange).not.toHaveBeenCalledWith('');
+          expect(handleOnChange).not.toHaveBeenCalledWith('12');
+          expect(handleOnChange).not.toHaveBeenCalledWith('12,14');
           rerender(
             <ValueEditor
               {...props}
@@ -115,7 +119,27 @@ export const testValueEditor = (
               handleOnChange={handleOnChange}
             />
           );
-          expect(handleOnChange).toHaveBeenCalledWith('');
+          expect(handleOnChange).toHaveBeenNthCalledWith(++callCount, '12');
+          rerender(
+            <ValueEditor
+              {...props}
+              inputType="number"
+              operator="="
+              value={['12', '14']}
+              handleOnChange={handleOnChange}
+            />
+          );
+          expect(handleOnChange).toHaveBeenNthCalledWith(++callCount, '12');
+          rerender(
+            <ValueEditor
+              {...props}
+              inputType="number"
+              operator="="
+              value={[]}
+              handleOnChange={handleOnChange}
+            />
+          );
+          expect(handleOnChange).toHaveBeenNthCalledWith(++callCount, '');
         });
       });
     }
@@ -158,17 +182,17 @@ export const testValueEditor = (
 
     if (!skip.radio) {
       describe('when rendering a radio button set', () => {
+        const radioProps: ValueEditorProps = {
+          ...props,
+          type: 'radio',
+          values: [
+            { name: 'test1', label: 'Test 1' },
+            { name: 'test2', label: 'Test 2' },
+          ],
+        };
+
         it('should render the radio buttons with labels', () => {
-          render(
-            <ValueEditor
-              {...props}
-              type="radio"
-              values={[
-                { name: 'test1', label: 'Test 1' },
-                { name: 'test2', label: 'Test 2' },
-              ]}
-            />
-          );
+          render(<ValueEditor {...radioProps} />);
           const radioButtons = screen.getByTitle(title).querySelectorAll('input[type="radio"]');
           expect(radioButtons).toHaveLength(2);
           for (const r of radioButtons) {
@@ -178,17 +202,7 @@ export const testValueEditor = (
 
         it('should call the onChange handler', async () => {
           const handleOnChange = jest.fn();
-          render(
-            <ValueEditor
-              {...props}
-              type="radio"
-              handleOnChange={handleOnChange}
-              values={[
-                { name: 'test1', label: 'Test 1' },
-                { name: 'test2', label: 'Test 2' },
-              ]}
-            />
-          );
+          render(<ValueEditor {...radioProps} handleOnChange={handleOnChange} />);
           const radioButtons = Array.from(
             screen.getByTitle(title).querySelectorAll('input[type="radio"]')
           );
@@ -200,20 +214,83 @@ export const testValueEditor = (
         });
 
         it('should be disabled by the disabled prop', async () => {
+          const handleOnChange = jest.fn();
+          render(<ValueEditor {...radioProps} handleOnChange={handleOnChange} disabled />);
+          for (const r of screen.getByTitle(title).querySelectorAll('input[type="radio"]')) {
+            expect(r).toBeDisabled();
+            await user.click(r);
+          }
+          expect(handleOnChange).not.toHaveBeenCalled();
+        });
+      });
+    }
+
+    if (!skip.betweenSelect) {
+      describe('when rendering a "between" select', () => {
+        const betweenSelectProps: ValueEditorProps = {
+          ...props,
+          operator: 'between',
+          type: 'select',
+          value: 'test1,test2',
+          values: [
+            { name: 'test1', label: 'Test 1' },
+            { name: 'test2', label: 'Test 2' },
+          ],
+        };
+
+        it('should render the "between" selects', () => {
+          render(<ValueEditor {...betweenSelectProps} />);
+          const betweenSelects = screen.getAllByRole('combobox');
+          expect(betweenSelects).toHaveLength(2);
+          expect(betweenSelects[0]).toHaveValue('test1');
+          expect(betweenSelects[1]).toHaveValue('test2');
+        });
+
+        it('should call the onChange handler', async () => {
+          const handleOnChange = jest.fn();
+          render(<ValueEditor {...betweenSelectProps} handleOnChange={handleOnChange} />);
+          const betweenSelects = screen.getAllByRole('combobox');
+          expect(betweenSelects).toHaveLength(2);
+          await user.selectOptions(betweenSelects[0], 'test2');
+          await user.selectOptions(betweenSelects[1], 'test1');
+          expect(handleOnChange).toHaveBeenNthCalledWith(1, 'test2,test2');
+          expect(handleOnChange).toHaveBeenNthCalledWith(2, 'test1,test1');
+        });
+
+        it('should assume the second value if not provided', async () => {
           const handleOnChange = jest.fn();
           render(
             <ValueEditor
-              {...props}
-              type="radio"
+              {...betweenSelectProps}
               handleOnChange={handleOnChange}
-              values={[
-                { name: 'test1', label: 'Test 1' },
-                { name: 'test2', label: 'Test 2' },
-              ]}
-              disabled
+              value={['test1']}
             />
           );
-          for (const r of screen.getByTitle(title).querySelectorAll('input[type="radio"]')) {
+          const betweenSelects = screen.getAllByRole('combobox');
+          expect(betweenSelects).toHaveLength(2);
+          await user.selectOptions(betweenSelects[0], 'test2');
+          expect(handleOnChange).toHaveBeenNthCalledWith(1, 'test2,test1');
+        });
+
+        it('should call the onChange handler with lists as arrays', async () => {
+          const handleOnChange = jest.fn();
+          render(
+            <ValueEditor {...betweenSelectProps} handleOnChange={handleOnChange} listsAsArrays />
+          );
+          const betweenSelects = screen.getAllByRole('combobox');
+          expect(betweenSelects).toHaveLength(2);
+          await user.selectOptions(betweenSelects[0], 'test2');
+          await user.selectOptions(betweenSelects[1], 'test1');
+          expect(handleOnChange).toHaveBeenNthCalledWith(1, ['test2', 'test2']);
+          expect(handleOnChange).toHaveBeenNthCalledWith(2, ['test1', 'test1']);
+        });
+
+        it('should be disabled by the disabled prop', async () => {
+          const handleOnChange = jest.fn();
+          render(<ValueEditor {...betweenSelectProps} handleOnChange={handleOnChange} disabled />);
+          const betweenSelects = screen.getAllByRole('combobox');
+          expect(betweenSelects).toHaveLength(2);
+          for (const r of betweenSelects) {
             expect(r).toBeDisabled();
             await user.click(r);
           }
diff --git a/packages/react-querybuilder/genericTests/testValueSelector.tsx b/packages/react-querybuilder/genericTests/testValueSelector.tsx
index 3ac1ebea6..ea043e819 100644
--- a/packages/react-querybuilder/genericTests/testValueSelector.tsx
+++ b/packages/react-querybuilder/genericTests/testValueSelector.tsx
@@ -11,6 +11,7 @@ export const defaultValueSelectorProps: ValueSelectorProps = {
   options: [
     { name: 'foo', label: 'Foo' },
     { name: 'bar', label: 'Bar' },
+    { name: 'baz', label: 'Baz' },
   ],
   level: 0,
   path: [],
@@ -29,7 +30,7 @@ export const testSelect = (
   describe(title, () => {
     it('should have the options passed into the <select />', () => {
       render(<Component {...props} />);
-      expect(screen.getByTitle(title).querySelectorAll('option')).toHaveLength(2);
+      expect(screen.getByTitle(title).querySelectorAll('option')).toHaveLength(testValues.length);
     });
 
     it('should render the correct number of options', () => {
@@ -58,11 +59,48 @@ export const testSelect = (
       (('values' in props && props.type === 'multiselect') || 'options' in props)
     ) {
       it('should have the values passed into the <select multiple />', () => {
+        const onChange = jest.fn();
         const value = testValues.map(v => v.name).join(',');
         const multiselectProps = 'values' in props ? { type: 'multiselect' } : { multiple: true };
-        render(<Component {...props} value={value} {...multiselectProps} />);
-        expect(findSelect(screen.getByTitle(title))).toHaveProperty('multiple', true);
-        expect(findSelect(screen.getByTitle(title)).selectedOptions.length).toBe(testValues.length);
+        render(
+          <Component {...props} value={value} {...multiselectProps} handleOnChange={onChange} />
+        );
+        const select = findSelect(screen.getByTitle(title));
+        expect(select).toHaveProperty('multiple', true);
+        expect(select.selectedOptions).toHaveLength(testValues.length);
+      });
+
+      it('should call the handleOnChange callback properly for <select multiple />', async () => {
+        const onChange = jest.fn();
+        const multiselectProps = 'values' in props ? { type: 'multiselect' } : { multiple: true };
+        const allValuesExceptFirst = testValues.slice(1, 3).map(v => v.name);
+        render(
+          <Component
+            {...props}
+            {...multiselectProps}
+            value={allValuesExceptFirst[0]}
+            handleOnChange={onChange}
+          />
+        );
+        const select = findSelect(screen.getByTitle(title));
+        await user.selectOptions(select, allValuesExceptFirst);
+        expect(onChange).toHaveBeenCalledWith(allValuesExceptFirst.join(','));
+      });
+
+      it('should respect the listsAsArrays option', async () => {
+        const onChange = jest.fn();
+        const multiselectProps = 'values' in props ? { type: 'multiselect' } : { multiple: true };
+        render(
+          <Component
+            {...props}
+            {...multiselectProps}
+            handleOnChange={onChange}
+            listsAsArrays
+            value={[]}
+          />
+        );
+        await user.selectOptions(findSelect(screen.getByTitle(title)), testVal.name);
+        expect(onChange).toHaveBeenCalledWith([testVal.name]);
       });
     }
 
diff --git a/packages/react-querybuilder/src/QueryBuilder.test.tsx b/packages/react-querybuilder/src/QueryBuilder.test.tsx
index 9c08f5390..46f4709b1 100644
--- a/packages/react-querybuilder/src/QueryBuilder.test.tsx
+++ b/packages/react-querybuilder/src/QueryBuilder.test.tsx
@@ -543,11 +543,7 @@ describe('actions', () => {
 
           return [];
         }}
-        getValueEditorType={(field: string) => {
-          if (field === 'field2') return 'checkbox';
-
-          return 'text';
-        }}
+        getValueEditorType={f => (f === 'field2' ? 'checkbox' : 'text')}
       />
     );
 
@@ -565,11 +561,7 @@ describe('actions', () => {
       <QueryBuilder
         fields={fields.slice(1)}
         onQueryChange={onQueryChange}
-        getValueEditorType={(field: string) => {
-          if (field === 'field2') return 'checkbox';
-
-          return 'text';
-        }}
+        getValueEditorType={f => (f === 'field2' ? 'checkbox' : 'text')}
       />
     );
 
@@ -808,24 +800,25 @@ describe('defaultValue property in field', () => {
 });
 
 describe('values property in field', () => {
+  const fields: Field[] = [
+    {
+      name: 'field1',
+      label: 'Field 1',
+      defaultValue: 'test',
+      values: [
+        { name: 'test', label: 'Test value 1' },
+        { name: 'test2', label: 'Test2' },
+      ],
+    },
+    {
+      name: 'field2',
+      label: 'Field 2',
+      defaultValue: 'test',
+      values: [{ name: 'test', label: 'Test' }],
+    },
+  ];
+
   it('sets the values list', async () => {
-    const fields: Field[] = [
-      {
-        name: 'field1',
-        label: 'Field 1',
-        defaultValue: 'test',
-        values: [
-          { name: 'test', label: 'Test value 1' },
-          { name: 'test2', label: 'Test2' },
-        ],
-      },
-      {
-        name: 'field2',
-        label: 'Field 2',
-        defaultValue: 'test',
-        values: [{ name: 'test', label: 'Test' }],
-      },
-    ];
     const onQueryChange = jest.fn();
     render(
       <QueryBuilder
@@ -840,6 +833,30 @@ describe('values property in field', () => {
     expect(screen.getByTestId(TestID.valueEditor).getElementsByTagName('option')).toHaveLength(2);
     expect(screen.getByDisplayValue('Test value 1')).toBeInTheDocument();
   });
+
+  it('sets the values list for "between" operator', async () => {
+    const onQueryChange = jest.fn();
+    render(
+      <QueryBuilder
+        getValueEditorType={() => 'select'}
+        getDefaultOperator="between"
+        fields={fields}
+        onQueryChange={onQueryChange}
+      />
+    );
+
+    await user.click(screen.getByTestId(TestID.addRule));
+    expect(screen.getAllByTestId(TestID.valueEditor)).toHaveLength(1);
+    const betweenSelects = screen
+      .getAllByRole('combobox')
+      .filter(bs => bs.classList.contains(sc.valueListItem));
+    expect(betweenSelects).toHaveLength(2);
+    for (const bs of betweenSelects) {
+      expect(bs.getElementsByTagName('option')).toHaveLength(2);
+      expect(bs).toHaveValue('test');
+    }
+    expect(screen.getAllByDisplayValue('Test value 1')).toHaveLength(2);
+  });
 });
 
 describe('inputType property in field', () => {
@@ -1892,6 +1909,10 @@ describe('value source field', () => {
     { name: 'f4', label: 'Field 4', valueSources: [] },
     { name: 'f5', label: 'Field 5', valueSources: ['field', 'value'] },
   ];
+  const fieldsWithBetween: Field[] = [
+    { name: 'fb', label: 'Field B', valueSources: ['field'], defaultOperator: 'between' },
+    ...fields,
+  ];
 
   it('sets the right default value', async () => {
     render(<QueryBuilder fields={fields} getDefaultField="f1" />);
@@ -1901,6 +1922,37 @@ describe('value source field', () => {
     );
   });
 
+  it('sets the right default value for "between" operator', async () => {
+    const onQueryChange = jest.fn();
+    render(
+      <QueryBuilder fields={fieldsWithBetween} getDefaultField="fb" onQueryChange={onQueryChange} />
+    );
+    await user.click(screen.getByTestId(TestID.addRule));
+    expect(screen.getAllByDisplayValue(fields.filter(f => f.name !== 'fb')[0].label)).toHaveLength(
+      2
+    );
+    expect(((onQueryChange.mock.calls[1][0] as RuleGroupType).rules[0] as RuleType).value).toBe(
+      'f1,f1'
+    );
+  });
+
+  it('sets the right default value for "between" operator and listsAsArrays', async () => {
+    const onQueryChange = jest.fn();
+    render(
+      <QueryBuilder
+        fields={fieldsWithBetween}
+        getDefaultField="fb"
+        onQueryChange={onQueryChange}
+        listsAsArrays
+      />
+    );
+    await user.click(screen.getByTestId(TestID.addRule));
+    expect(((onQueryChange.mock.calls[1][0] as RuleGroupType).rules[0] as RuleType).value).toEqual([
+      'f1',
+      'f1',
+    ]);
+  });
+
   it('handles empty comparator results', async () => {
     render(<QueryBuilder fields={fields} getDefaultField="f3" />);
     await user.click(screen.getByTestId(TestID.addRule));
diff --git a/packages/react-querybuilder/src/QueryBuilder.tsx b/packages/react-querybuilder/src/QueryBuilder.tsx
index 0663e183f..8763d3c5c 100644
--- a/packages/react-querybuilder/src/QueryBuilder.tsx
+++ b/packages/react-querybuilder/src/QueryBuilder.tsx
@@ -40,6 +40,7 @@ import {
   add,
   getFirstOption,
   isOptionGroupArray,
+  joinWith,
   move,
   pathIsDisabled,
   prepareRuleGroup,
@@ -83,6 +84,7 @@ export const QueryBuilderWithoutDndProvider = <RG extends RuleGroupType | RuleGr
   addRuleToNewGroups = false,
   enableDragAndDrop = false,
   independentCombinators,
+  listsAsArrays = false,
   disabled = false,
   validator,
   context,
@@ -279,18 +281,32 @@ export const QueryBuilderWithoutDndProvider = <RG extends RuleGroupType | RuleGr
 
       const values = getValuesMain(rule.field, rule.operator);
 
+      const getFirstOptionsFrom = (opts: any[]) => {
+        const firstOption = getFirstOption(opts);
+        if (rule.operator === 'between' || rule.operator === 'notBetween') {
+          const valArray = [firstOption, firstOption];
+          return listsAsArrays
+            ? valArray
+            : joinWith(
+                valArray.map(v => v ?? /* istanbul ignore next */ ''),
+                ','
+              );
+        } else {
+          return firstOption;
+        }
+      };
+
       if (rule.valueSource === 'field') {
         const filteredFields = filterFieldsByComparator(fieldData, fields, rule.operator);
         if (filteredFields.length > 0) {
-          value = getFirstOption(filteredFields);
+          value = getFirstOptionsFrom(filteredFields);
         } else {
           value = '';
         }
       } else if (values.length) {
-        value = getFirstOption(values);
+        value = getFirstOptionsFrom(values);
       } else {
         const editorType = getValueEditorTypeMain(rule.field, rule.operator);
-
         if (editorType === 'checkbox') {
           value = false;
         }
@@ -298,7 +314,7 @@ export const QueryBuilderWithoutDndProvider = <RG extends RuleGroupType | RuleGr
 
       return value;
     },
-    [fieldMap, fields, getDefaultValue, getValueEditorTypeMain, getValuesMain]
+    [fieldMap, fields, getDefaultValue, getValueEditorTypeMain, getValuesMain, listsAsArrays]
   );
 
   const getInputTypeMain = useCallback(
@@ -543,6 +559,7 @@ export const QueryBuilderWithoutDndProvider = <RG extends RuleGroupType | RuleGr
       addRuleToNewGroups,
       enableDragAndDrop,
       independentCombinators: !!independentCombinators,
+      listsAsArrays,
       validationMap,
       disabledPaths,
     }),
@@ -565,6 +582,7 @@ export const QueryBuilderWithoutDndProvider = <RG extends RuleGroupType | RuleGr
       getValueSourcesMain,
       getValuesMain,
       independentCombinators,
+      listsAsArrays,
       showCloneButtons,
       showCombinatorsBetweenRules,
       showLockButtons,
diff --git a/packages/react-querybuilder/src/Rule.tsx b/packages/react-querybuilder/src/Rule.tsx
index bae61c69c..63ad7f016 100644
--- a/packages/react-querybuilder/src/Rule.tsx
+++ b/packages/react-querybuilder/src/Rule.tsx
@@ -45,6 +45,7 @@ export const Rule = ({
     showCloneButtons,
     showLockButtons,
     independentCombinators,
+    listsAsArrays,
     validationMap,
   } = schema;
   const { moveRule, onPropChange, onRuleRemove } = actions;
@@ -259,6 +260,7 @@ export const Rule = ({
                 type={valueEditorType}
                 inputType={inputType}
                 values={values}
+                listsAsArrays={listsAsArrays}
                 className={c(standardClassnames.value, classNames.value)}
                 handleOnChange={generateOnChangeHandler('value')}
                 level={level}
diff --git a/packages/react-querybuilder/src/controls/ValueEditor.tsx b/packages/react-querybuilder/src/controls/ValueEditor.tsx
index 1bcc5dd8f..ee6d1a4d6 100644
--- a/packages/react-querybuilder/src/controls/ValueEditor.tsx
+++ b/packages/react-querybuilder/src/controls/ValueEditor.tsx
@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
+import { standardClassnames } from '../defaults';
 import type { ValueEditorProps } from '../types';
+import { joinWith, toArray, useValueEditor } from '../utils';
 import { ValueSelector } from './ValueSelector';
 
 export const ValueEditor = ({
@@ -10,25 +11,14 @@ export const ValueEditor = ({
   className,
   type,
   inputType,
-  values,
+  values = [],
+  listsAsArrays,
   fieldData,
   disabled,
   testID,
   ...props
 }: ValueEditorProps) => {
-  // This side effect blanks out the value if 1) the inputType is "number",
-  // 2) the operator is not "between", "notBetween", "in", or "notIn", and
-  // 3) the value contains a comma.
-  useEffect(() => {
-    if (
-      inputType === 'number' &&
-      !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&
-      typeof value === 'string' &&
-      value.includes(',')
-    ) {
-      handleOnChange('');
-    }
-  }, [handleOnChange, inputType, operator, value]);
+  useValueEditor({ handleOnChange, inputType, operator, value });
 
   if (operator === 'null' || operator === 'notNull') {
     return null;
@@ -39,6 +29,40 @@ export const ValueEditor = ({
     ? 'text'
     : inputType || 'text';
 
+  if ((operator === 'between' || operator === 'notBetween') && type === 'select') {
+    const valArray = toArray(value);
+    const selector1handler = (v: string) => {
+      const val = [v, valArray[1] ?? values[0]?.name, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    const selector2handler = (v: string) => {
+      const val = [valArray[0], v, ...valArray.slice(2)];
+      handleOnChange(listsAsArrays ? val : joinWith(val, ','));
+    };
+    return (
+      <span data-testid={testID} className={className} title={title}>
+        <ValueSelector
+          {...props}
+          className={standardClassnames.valueListItem}
+          handleOnChange={selector1handler}
+          disabled={disabled}
+          value={valArray[0]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+        <ValueSelector
+          {...props}
+          className={standardClassnames.valueListItem}
+          handleOnChange={selector2handler}
+          disabled={disabled}
+          value={valArray[1]}
+          options={values}
+          listsAsArrays={listsAsArrays}
+        />
+      </span>
+    );
+  }
+
   switch (type) {
     case 'select':
     case 'multiselect':
@@ -51,8 +75,9 @@ export const ValueEditor = ({
           handleOnChange={handleOnChange}
           disabled={disabled}
           value={value}
-          options={values!}
+          options={values}
           multiple={type === 'multiselect'}
+          listsAsArrays={listsAsArrays}
         />
       );
 
@@ -86,19 +111,18 @@ export const ValueEditor = ({
     case 'radio':
       return (
         <span data-testid={testID} className={className} title={title}>
-          {values &&
-            values.map(v => (
-              <label key={v.name}>
-                <input
-                  type="radio"
-                  value={v.name}
-                  disabled={disabled}
-                  checked={value === v.name}
-                  onChange={e => handleOnChange(e.target.value)}
-                />
-                {v.label}
-              </label>
-            ))}
+          {values.map(v => (
+            <label key={v.name}>
+              <input
+                type="radio"
+                value={v.name}
+                disabled={disabled}
+                checked={value === v.name}
+                onChange={e => handleOnChange(e.target.value)}
+              />
+              {v.label}
+            </label>
+          ))}
         </span>
       );
   }
diff --git a/packages/react-querybuilder/src/controls/ValueSelector.tsx b/packages/react-querybuilder/src/controls/ValueSelector.tsx
index 1e62a2bdd..f5b46e54d 100644
--- a/packages/react-querybuilder/src/controls/ValueSelector.tsx
+++ b/packages/react-querybuilder/src/controls/ValueSelector.tsx
@@ -1,6 +1,6 @@
 import { useMemo, type ChangeEvent } from 'react';
 import type { ValueSelectorProps } from '../types';
-import { toOptions } from '../utils';
+import { joinWith, toArray, toOptions } from '../utils';
 
 export const ValueSelector = ({
   className,
@@ -9,27 +9,26 @@ export const ValueSelector = ({
   title,
   value,
   multiple,
+  listsAsArrays,
   disabled,
   testID,
 }: ValueSelectorProps) => {
-  const onChange = useMemo(() => {
-    if (multiple) {
-      return (e: ChangeEvent<HTMLSelectElement>) =>
-        handleOnChange(
-          [...e.target.options]
-            .filter(o => o.selected)
-            .map(o => o.value)
-            .join(',')
-        );
-    }
-    return (e: ChangeEvent<HTMLSelectElement>) => handleOnChange(e.target.value);
-  }, [handleOnChange, multiple]);
+  const onChange = useMemo(
+    () =>
+      multiple
+        ? (e: ChangeEvent<HTMLSelectElement>) => {
+            const valArray = Array.from(e.target.selectedOptions).map(o => o.value);
+            handleOnChange(listsAsArrays ? valArray : joinWith(valArray, ','));
+          }
+        : (e: ChangeEvent<HTMLSelectElement>) => handleOnChange(e.target.value),
+    [handleOnChange, listsAsArrays, multiple]
+  );
 
   return (
     <select
       data-testid={testID}
       className={className}
-      value={multiple && value ? value.split(',') : value}
+      value={multiple ? toArray(value) : value}
       title={title}
       disabled={disabled}
       multiple={!!multiple}
diff --git a/packages/react-querybuilder/src/defaults.ts b/packages/react-querybuilder/src/defaults.ts
index 7d3e6f644..1fc5e352a 100644
--- a/packages/react-querybuilder/src/defaults.ts
+++ b/packages/react-querybuilder/src/defaults.ts
@@ -14,6 +14,8 @@ export const defaultPlaceholderOperatorName = placeholderName;
 export const defaultPlaceholderOperatorLabel = placeholderLabel;
 export const defaultPlaceholderOperatorGroupLabel = placeholderLabel;
 
+export const defaultJoinChar = ',';
+
 export const defaultTranslations: TranslationsFull = {
   fields: {
     title: 'Fields',
@@ -139,6 +141,7 @@ export const standardClassnames = {
   lockRule: 'rule-lock',
   lockGroup: 'ruleGroup-lock',
   valueSource: 'rule-valueSource',
+  valueListItem: 'rule-value-list-item',
 } as const;
 
 export const defaultControlClassnames: Classnames = {
diff --git a/packages/react-querybuilder/src/query-builder.scss b/packages/react-querybuilder/src/query-builder.scss
index cd249876e..854dcc8d0 100644
--- a/packages/react-querybuilder/src/query-builder.scss
+++ b/packages/react-querybuilder/src/query-builder.scss
@@ -80,3 +80,12 @@ $rqb-dnd-hover-border-bottom-width: 2px !default;
 [data-dnd='disabled'] .queryBuilder-dragHandle {
   display: none;
 }
+
+// Miscellaneous
+.rule {
+  .rule-value {
+    .rule-value-list-item:not(:first-of-type) {
+      margin-left: $rqb-spacing;
+    }
+  }
+}
diff --git a/packages/react-querybuilder/src/types/props.ts b/packages/react-querybuilder/src/types/props.ts
index 8eae78d2c..151175cfe 100644
--- a/packages/react-querybuilder/src/types/props.ts
+++ b/packages/react-querybuilder/src/types/props.ts
@@ -49,6 +49,7 @@ export interface BaseSelectorProps extends SelectorEditorProps {
 
 export interface ValueSelectorProps extends BaseSelectorProps {
   multiple?: boolean;
+  listsAsArrays?: boolean;
 }
 
 export interface NotToggleProps extends CommonSubComponentProps {
@@ -95,6 +96,7 @@ export interface ValueEditorProps extends SelectorEditorProps {
   type?: ValueEditorType;
   inputType?: string | null;
   values?: any[];
+  listsAsArrays?: boolean;
 }
 
 export interface DragHandleProps extends CommonSubComponentProps {
diff --git a/packages/react-querybuilder/src/types/propsUsingReact.ts b/packages/react-querybuilder/src/types/propsUsingReact.ts
index 3f1036f87..80ae97350 100644
--- a/packages/react-querybuilder/src/types/propsUsingReact.ts
+++ b/packages/react-querybuilder/src/types/propsUsingReact.ts
@@ -86,6 +86,7 @@ export interface Schema {
   enableDragAndDrop: boolean;
   validationMap: ValidationMap;
   independentCombinators: boolean;
+  listsAsArrays: boolean;
   disabledPaths: number[][];
 }
 
@@ -308,6 +309,10 @@ type QueryBuilderPropsBase<RG extends RuleGroupType | RuleGroupTypeIC> = (RG ext
    * Enables drag-and-drop features
    */
   enableDragAndDrop?: boolean;
+  /**
+   * Store list-type values as native arrays instead of comma-separated strings
+   */
+  listsAsArrays?: boolean;
   /**
    * Disables the entire query builder if true, or the rules and groups at
    * the specified paths (as well as all child rules/groups and subcomponents)
diff --git a/packages/react-querybuilder/src/utils/arrayUtils.test.ts b/packages/react-querybuilder/src/utils/arrayUtils.test.ts
new file mode 100644
index 000000000..4f196f831
--- /dev/null
+++ b/packages/react-querybuilder/src/utils/arrayUtils.test.ts
@@ -0,0 +1,31 @@
+import { joinWith, splitBy, toArray } from './arrayUtils';
+
+const commaString = 'this\\,\\,that,,the other,,,\\,';
+const commaArray = ['this,,that', '', 'the other', '', '', ','];
+const plusString = 'this\\+\\+that++the other+++\\+';
+const plusArray = ['this++that', '', 'the other', '', '', '+'];
+
+it('splits by a character', () => {
+  expect(splitBy()).toEqual([]);
+  expect(splitBy(undefined, '+')).toEqual([]);
+  expect(splitBy(commaString)).toEqual(commaArray);
+  expect(splitBy(commaString, ',')).toEqual(commaArray);
+  expect(splitBy(plusString, '+')).toEqual(plusArray);
+});
+
+it('joins with a character', () => {
+  expect(joinWith(commaArray)).toBe(commaString);
+  expect(joinWith(commaArray, ',')).toBe(commaString);
+  expect(joinWith(plusArray, '+')).toBe(plusString);
+});
+
+it('converts stuff to an array', () => {
+  expect(toArray([])).toEqual([]);
+  expect(toArray({})).toEqual([]);
+  expect(toArray(true)).toEqual([]);
+  expect(toArray(false)).toEqual([]);
+  expect(toArray(1214)).toEqual([]);
+  expect(toArray('test')).toEqual(['test']);
+  expect(toArray('test,  ,,,this')).toEqual(['test', 'this']);
+  expect(toArray([null, 'test', 1214, '  '])).toEqual([null, 'test', 1214, '']);
+});
diff --git a/packages/react-querybuilder/src/utils/arrayUtils.ts b/packages/react-querybuilder/src/utils/arrayUtils.ts
new file mode 100644
index 000000000..7965a3c81
--- /dev/null
+++ b/packages/react-querybuilder/src/utils/arrayUtils.ts
@@ -0,0 +1,58 @@
+import { defaultJoinChar } from '../defaults';
+
+/**
+ * Splits a string by a given character (default ','). Escaped characters (characters
+ * preceded by a backslash) will not apply to the split, and the backslash will be
+ * removed in the array element. Inverse of `joinWith`.
+ *
+ * @example
+ * splitBy('this\\,\\,that,,the other,,,\\,')
+ * // or
+ * splitBy('this\\,\\,that,,the other,,,\\,', ',')
+ * // would return
+ * ['this,,that', '', 'the other', '', '', ',']
+ */
+export const splitBy = (str?: string, splitChar = defaultJoinChar) =>
+  typeof str === 'undefined'
+    ? []
+    : str
+        .split(`\\${splitChar}`)
+        .map(c => c.split(splitChar))
+        .reduce((prev, curr, idx) => {
+          if (idx === 0) return curr;
+          // prev[prev.length - 1] = `${prev[prev.length - 1]},${curr[0]}`;
+          return [
+            ...prev.slice(0, prev.length - 1),
+            `${prev[prev.length - 1]}${splitChar}${curr[0]}`,
+            ...curr.slice(1),
+          ];
+        }, []);
+
+/**
+ * Joins an array of strings using the given character (default ','). When the given
+ * character appears in an array element, a backslash will be added just before it to
+ * distinguish it from the join character. Inverse of `splitBy`.
+ *
+ * @example
+ * joinWith(['this,,that', '', 'the other', '', '', ','])
+ * // would return
+ * 'this\\,\\,that,,the other,,,\\,'
+ */
+export const joinWith = (strArr: string[], joinChar = defaultJoinChar) =>
+  strArr.map(str => str.replaceAll(joinChar, `\\${joinChar}`)).join(joinChar);
+
+/**
+ * Trims the value if it is a string. Otherwise returns value as-is.
+ */
+export const trimIfString = (val: any) => (typeof val === 'string' ? val.trim() : val);
+
+/**
+ * Splits strings by comma and trims each element; returns arrays as-is.
+ */
+export const toArray = (v: any) =>
+  (Array.isArray(v)
+    ? v
+    : typeof v === 'string'
+    ? splitBy(v, defaultJoinChar).filter(s => !/^\s*$/.test(s))
+    : []
+  ).map(trimIfString);
diff --git a/packages/react-querybuilder/src/utils/formatQuery/defaultRuleProcessorJsonLogic.ts b/packages/react-querybuilder/src/utils/formatQuery/defaultRuleProcessorJsonLogic.ts
index 21d4db3e4..559b22142 100644
--- a/packages/react-querybuilder/src/utils/formatQuery/defaultRuleProcessorJsonLogic.ts
+++ b/packages/react-querybuilder/src/utils/formatQuery/defaultRuleProcessorJsonLogic.ts
@@ -1,6 +1,7 @@
 import type { JsonLogicVar } from 'json-logic-js';
 import type { RQBJsonLogic, RuleType, ValueProcessorOptions } from '../../types/index.noReact';
-import { isValidValue, shouldRenderAsNumber, toArray } from './utils';
+import { toArray } from '../arrayUtils';
+import { isValidValue, shouldRenderAsNumber } from './utils';
 
 const convertOperator = (op: '<' | '<=' | '=' | '!=' | '>' | '>=') =>
   op
diff --git a/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorByRule.ts b/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorByRule.ts
index 2b40dcfae..2089a6f96 100644
--- a/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorByRule.ts
+++ b/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorByRule.ts
@@ -1,5 +1,6 @@
 import type { ValueProcessorByRule } from '../../types/index.noReact';
-import { isValidValue, shouldRenderAsNumber, toArray, trimIfString } from './utils';
+import { toArray, trimIfString } from '../arrayUtils';
+import { isValidValue, shouldRenderAsNumber } from './utils';
 
 export const defaultValueProcessorByRule: ValueProcessorByRule = (
   { operator, value, valueSource },
diff --git a/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorCELByRule.ts b/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorCELByRule.ts
index 4a4b49e6f..630bace34 100644
--- a/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorCELByRule.ts
+++ b/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorCELByRule.ts
@@ -1,5 +1,6 @@
 import type { ValueProcessorByRule } from '../../types/index.noReact';
-import { shouldRenderAsNumber, toArray, trimIfString } from './utils';
+import { toArray, trimIfString } from '../arrayUtils';
+import { shouldRenderAsNumber } from './utils';
 
 const shouldNegate = (op: string) => /^(does)?not/i.test(op);
 
diff --git a/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorMongoDBByRule.ts b/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorMongoDBByRule.ts
index 35b628540..906d55215 100644
--- a/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorMongoDBByRule.ts
+++ b/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorMongoDBByRule.ts
@@ -1,13 +1,14 @@
 import type { ValueProcessorByRule } from '../../types/index.noReact';
-import { isValidValue, mongoOperators, shouldRenderAsNumber, toArray, trimIfString } from './utils';
+import { toArray, trimIfString } from '../arrayUtils';
+import { isValidValue, mongoOperators, shouldRenderAsNumber } from './utils';
 
 export const defaultValueProcessorMongoDBByRule: ValueProcessorByRule = (
   { field, operator, value, valueSource },
   // istanbul ignore next
-  { escapeQuotes, parseNumbers } = {}
+  { parseNumbers } = {}
 ) => {
   const escapeDoubleQuotes = (v: any) =>
-    typeof v !== 'string' || !escapeQuotes ? v : v.replaceAll(`"`, `\\"`);
+    typeof v !== 'string' ? v : v.replaceAll('\\', '\\\\').replaceAll(`"`, `\\"`);
   const valueIsField = valueSource === 'field';
   const useBareValue =
     typeof value === 'number' ||
diff --git a/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorSpELByRule.ts b/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorSpELByRule.ts
index 12a204307..ef49c44ff 100644
--- a/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorSpELByRule.ts
+++ b/packages/react-querybuilder/src/utils/formatQuery/defaultValueProcessorSpELByRule.ts
@@ -1,5 +1,6 @@
 import type { ValueProcessorByRule } from '../../types/index.noReact';
-import { shouldRenderAsNumber, toArray, trimIfString } from './utils';
+import { toArray, trimIfString } from '../arrayUtils';
+import { shouldRenderAsNumber } from './utils';
 
 const shouldNegate = (op: string) => /^(does)?not/i.test(op);
 
diff --git a/packages/react-querybuilder/src/utils/formatQuery/formatQuery.ts b/packages/react-querybuilder/src/utils/formatQuery/formatQuery.ts
index 9429c7b37..9d45e9103 100644
--- a/packages/react-querybuilder/src/utils/formatQuery/formatQuery.ts
+++ b/packages/react-querybuilder/src/utils/formatQuery/formatQuery.ts
@@ -15,6 +15,7 @@ import type {
   ValidationMap,
   ValidationResult,
 } from '../../types/index.noReact';
+import { toArray } from '../arrayUtils';
 import { convertFromIC } from '../convertQuery';
 import { isRuleOrGroupValid } from '../isRuleOrGroupValid';
 import { defaultRuleProcessorJsonLogic } from './defaultRuleProcessorJsonLogic';
@@ -28,7 +29,6 @@ import {
   mapSQLOperator,
   numerifyValues,
   shouldRenderAsNumber,
-  toArray,
 } from './utils';
 
 /**
@@ -352,10 +352,7 @@ function formatQuery(ruleGroup: RuleGroupTypeAny, options: FormatQueryOptions |
             ) {
               return '';
             }
-            return valueProcessorInternal(rule, {
-              parseNumbers,
-              escapeQuotes: (rule.valueSource ?? 'value') === 'value',
-            });
+            return valueProcessorInternal(rule, { parseNumbers });
           })
           .filter(Boolean)
           .join(',');
diff --git a/packages/react-querybuilder/src/utils/formatQuery/utils.ts b/packages/react-querybuilder/src/utils/formatQuery/utils.ts
index 2c4b4759a..406691ef4 100644
--- a/packages/react-querybuilder/src/utils/formatQuery/utils.ts
+++ b/packages/react-querybuilder/src/utils/formatQuery/utils.ts
@@ -7,16 +7,6 @@ import type {
 
 export const numericRegex = /^\s*[+-]?(\d+|\d*\.\d+|\d+\.\d*)([Ee][+-]?\d+)?\s*$/;
 
-export const trimIfString = (val: any) => (typeof val === 'string' ? val.trim() : val);
-
-export const toArray = (v: any) =>
-  (Array.isArray(v)
-    ? v
-    : typeof v === 'string'
-    ? v.split(',').filter(s => !/^\s*$/.test(s))
-    : []
-  ).map(trimIfString);
-
 export const mapSQLOperator = (op: string) => {
   switch (op.toLowerCase()) {
     case 'null':
diff --git a/packages/react-querybuilder/src/utils/hooks/index.ts b/packages/react-querybuilder/src/utils/hooks/index.ts
new file mode 100644
index 000000000..782eaa538
--- /dev/null
+++ b/packages/react-querybuilder/src/utils/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useValueEditor';
diff --git a/packages/react-querybuilder/src/utils/hooks/useValueEditor.ts b/packages/react-querybuilder/src/utils/hooks/useValueEditor.ts
new file mode 100644
index 000000000..69caa7807
--- /dev/null
+++ b/packages/react-querybuilder/src/utils/hooks/useValueEditor.ts
@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import type { ValueEditorProps } from '../../types';
+import { toArray } from '../arrayUtils';
+
+type useValueEditorParams = Pick<
+  ValueEditorProps,
+  'handleOnChange' | 'inputType' | 'operator' | 'value'
+>;
+
+/**
+ * This Effect trims the value if all of the following are true:
+ *  - `inputType` is "number"
+ *  - `operator` is not one of ("between", "notBetween", "in", "notIn")
+ *  - `value` is an array OR the value is a string containing a comma
+ *
+ * For example, consider the following rule:
+ *
+ * `{ field: "f1", operator: "between", value: "12,14" }`
+ *
+ * If its operator changes to "=", the value will be reset to "12" since
+ * the "number" input type can't handle arrays or strings with commas.
+ */
+export const useValueEditor = ({
+  handleOnChange,
+  inputType,
+  operator,
+  value,
+}: useValueEditorParams) => {
+  useEffect(() => {
+    if (
+      inputType === 'number' &&
+      !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&
+      ((typeof value === 'string' && value.includes(',')) || Array.isArray(value))
+    ) {
+      handleOnChange(toArray(value)[0] ?? '');
+    }
+  }, [handleOnChange, inputType, operator, value]);
+};
diff --git a/packages/react-querybuilder/src/utils/index.ts b/packages/react-querybuilder/src/utils/index.ts
index d34d87181..f9ed8de1a 100644
--- a/packages/react-querybuilder/src/utils/index.ts
+++ b/packages/react-querybuilder/src/utils/index.ts
@@ -1,6 +1,8 @@
+export * from './arrayUtils';
 export * from './convertQuery';
 export * from './defaultValidator';
 export * from './formatQuery';
+export * from './hooks';
 export * from './isRuleGroup';
 export * from './isRuleOrGroupValid';
 export * from './optGroupUtils';