Merge pull request #829 from data-driven-forms/empty-value-selection

fix(pf3): allow select null value

Author: rvsia

packages/pf3-component-mapper/demo/index.js

@@ -23,6 +23,23 @@ const loadOptions = () => new Promise((res) => {
 
 const selectSchema = {
   fields: [{
+    component: 'select',
+    name: 'falsey-values',
+    label: 'Falsey values',
+    options: [{
+      label: 'Zero',
+      value: 0
+    }, {
+      label: 'Minus one',
+      value: -1
+    }, {
+      label: 'Empty',
+      value: 'empty'
+    }, {
+      label: 'Null',
+      value: null
+    }]
+  }, {
     component: 'select',
     name: 'async-single',
     label: 'Async single',

packages/pf3-component-mapper/package.json

@@ -79,7 +79,7 @@
     "clsx": "^1.0.4",
     "prop-types": "^15.7.2",
     "react-day-picker": "~7.3.2",
-    "react-select": "^3.0.8"
+    "react-select": "^3.1.0"
   },
   "resolutions": {
     "terser": "3.14.1"

packages/pf3-component-mapper/src/files/select.js

@@ -36,7 +36,12 @@ Select.propTypes = {
   description: PropTypes.node,
   placeholder: PropTypes.string,
   isDisabled: PropTypes.bool,
-  inputAddon: PropTypes.shape({ fields: PropTypes.array })
+  inputAddon: PropTypes.shape({ fields: PropTypes.array }),
+  allowNull: PropTypes.bool
+};
+
+Select.defaultProps = {
+  allowNull: true
 };
 
 export default Select;

packages/pf3-component-mapper/src/files/select/dropdown-indicator.js

@@ -6,13 +6,13 @@ const DropdownIndicator = ({ selectProps: { isFetching, value } }) =>
   isFetching ? (
     <i
       className={clsx('ddorg__pf3-component-mapper__select__dropdown-indicator fa fa-circle-o-notch spin', {
-        placeholder: value.length === 0
+        placeholder: value?.length === 0
       })}
     />
   ) : (
     <i
       className={clsx('ddorg__pf3-component-mapper__select__dropdown-indicator fa fa-angle-down', {
-        placeholder: value.length === 0
+        placeholder: value?.length === 0
       })}
     />
   );

packages/pf3-component-mapper/src/files/select/select.js

@@ -13,6 +13,25 @@ import Option from './option';
 import DropdownIndicator from './dropdown-indicator';
 import ClearIndicator from './clear-indicator';
 
+const sanitizeNullValue = (value) => {
+  if (value === null) {
+    return '';
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => sanitizeNullValue(item));
+  }
+
+  if (typeof value === 'object') {
+    return {
+      ...value,
+      value: value.value === null ? '' : value.value
+    };
+  }
+
+  return value;
+};
+
 const getDropdownText = (value, placeholder, options) => {
   if (Array.isArray(value)) {
     if (value.length === 0) {
@@ -163,7 +182,7 @@ const Select = ({ input, loadOptions, ...props }) => {
           })}
         >
           <DataDrivenSelect
-            SelectComponent={ReactSelect}
+            SelectComponent={({ value, ...props }) => <ReactSelect value={sanitizeNullValue(value)} {...props} />}
             {...searchableInput}
             {...props}
             loadOptions={loadOptionsEnhanced}
@@ -196,7 +215,7 @@ const Select = ({ input, loadOptions, ...props }) => {
 
   return (
     <DataDrivenSelect
-      SelectComponent={ReactSelect}
+      SelectComponent={({ value, ...props }) => <ReactSelect value={sanitizeNullValue(value)} {...props} />}
       {...props}
       {...input}
       loadOptionsChangeCounter={loadOptionsChangeCounter}