Fixed SelectField with checkboxes in uniforms-antd (fixes #549).

vazco · Jul 12, 2019 · 102c489 · 102c489
1 parent 05026d3
commit 102c489
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - **Added:** Support for `labelClassName` in `uniforms-bootstrap3` and `uniforms-bootstrap4` themes. [\#548](https://github.com/vazco/uniforms/issues/548)
 - **Fixed:** Handling of `required` validation in `JSONSchemaBridge`. [\#554](https://github.com/vazco/uniforms/issues/554)
+- **Fixed:** Weird behaviour of `SelectField` with `checkboxes` in `uniforms-antd`. [\#549](https://github.com/vazco/uniforms/issues/549)
 
 ## [v2.1.0](https://github.com/vazco/uniforms/tree/v2.1.0) (2019-06-18)
 

diff --git a/packages/uniforms-antd/src/SelectField.js b/packages/uniforms-antd/src/SelectField.js
@@ -8,39 +8,22 @@ import filterDOMProps from 'uniforms/filterDOMProps';
 import wrapField from './wrapField';
 
 const renderCheckboxes = props =>
-  props.fieldType === Array ? (
-    <Checkbox.Group
-      disabled={props.disabled}
-      id={props.id}
-      name={props.name}
-      onChange={value => props.onChange(value)}
-      options={props.allowedValues.map(String)}
-      value={props.value.map(String).map(props.transform || String)}
-      {...filterDOMProps(props)}
-    />
-  ) : (
-    <Radio.Group
-      disabled={props.disabled}
-      name={props.name}
-      onChange={event => props.onChange(event.target.value)}
-      value={props.value}
-      {...filterDOMProps(props)}
-    >
-      {props.allowedValues.map(value => (
-        <Radio
-          key={value}
-          value={value}
-          style={{
-            display: 'block',
-            height: '30px',
-            lineHeight: '30px'
-          }}
-        >
-          {props.transform ? props.transform(value) : value}
-        </Radio>
-      ))}
-    </Radio.Group>
-  );
+  React.createElement((props.fieldType === Array ? Checkbox : Radio).Group, {
+    disabled: props.disabled,
+    id: props.id,
+    name: props.name,
+    onChange:
+      props.fieldType === Array
+        ? value => props.onChange(value)
+        : event => props.onChange(event.target.value),
+    options: props.allowedValues.map(value => ({
+      label: props.transform ? props.transform(value) : value,
+      value
+    })),
+    value: props.value,
+    ...filterDOMProps(props)
+  });
+
 const renderSelect = props => (
   <SelectAntD
     allowClear={!props.required}
@@ -63,6 +46,7 @@ const renderSelect = props => (
     ))}
   </SelectAntD>
 );
+
 const Select = ({ checkboxes, ...props }) =>
   wrapField(props, checkboxes ? renderCheckboxes(props) : renderSelect(props));
 export default connectField(Select);