feat(carbon): Implement searchable/clearable non-multi select

Author: skateman

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

@@ -5,7 +5,7 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import DataDrivenSelect from '@data-driven-forms/common/src/select';
 import fnToString from '@data-driven-forms/common/src/utils/fn-to-string';
 
-import { Select as CarbonSelect, MultiSelect, SelectItem } from 'carbon-components-react';
+import { Select as CarbonSelect, MultiSelect, SelectItem, ComboBox } from 'carbon-components-react';
 import prepareProps from '../common/prepare-props';
 
 export const multiOnChange = (input, simpleValue) => ({ selectedItems }) => {
@@ -165,8 +165,63 @@ ClearedSelect.propTypes = {
   isClearable: PropTypes.bool
 };
 
+const ClearedSelectSearchable = ({
+  isSearchable,
+  isClearable,
+  isDisabled,
+  isMulti,
+  invalidText,
+  hideSelectedOptions,
+  noOptionsMessage,
+  onInputChange,
+  options,
+  isFetching,
+  invalid,
+  classNamePrefix,
+  closeMenuOnSelect,
+  originalOnChange,
+  placeholder,
+  labelText,
+  ...rest
+}) => (
+  <ComboBox
+    disabled={isFetching}
+    {...rest}
+    id={rest.name}
+    invalid={Boolean(invalidText)}
+    invalidText={invalidText}
+    initialSelectedItem={rest.value}
+    items={options}
+    placeholder={placeholder}
+    titleText={labelText}
+    onChange={originalOnChange}
+  />
+);
+
+ClearedSelectSearchable.propTypes = {
+  invalidText: PropTypes.node,
+  hideSelectedOptions: PropTypes.any,
+  noOptionsMessage: PropTypes.any,
+  onInputChange: PropTypes.func,
+  options: PropTypes.array,
+  isFetching: PropTypes.bool,
+  invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  isMulti: PropTypes.bool,
+  classNamePrefix: PropTypes.any,
+  closeMenuOnSelect: PropTypes.any,
+  onChange: PropTypes.func,
+  originalOnChange: PropTypes.func,
+  carbonLabel: PropTypes.node,
+  placeholder: PropTypes.node,
+  isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  labelText: PropTypes.string
+};
+
 const Select = (props) => {
-  const { isMulti, isSearchable, loadOptions, input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
+  const { isMulti, isSearchable, isClearable, loadOptions, input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
 
   const [loadOptionsChangeCounter, setCounter] = useState(0);
 
@@ -176,8 +231,10 @@ const Select = (props) => {
     setCounter(loadOptionsChangeCounter + 1);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadOptionsStr]);
+  const isSearchClear = isSearchable || isClearable;
 
-  const Component = isMulti && isSearchable ? ClearedMultiSelectFilterable : isMulti ? ClearedMultiSelect : ClearedSelect;
+  const Component =
+    isMulti && isSearchClear ? ClearedMultiSelectFilterable : isMulti ? ClearedMultiSelect : isSearchClear ? ClearedSelectSearchable : ClearedSelect;
 
   const invalidText = ((meta.touched || validateOnMount) && meta.error) || '';
 

packages/carbon-component-mapper/src/tests/select.test.js

@@ -5,7 +5,7 @@ import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-rend
 
 import FormTemplate from '../files/form-template';
 import componentMapper from '../files/component-mapper';
-import { Select, MultiSelect } from 'carbon-components-react';
+import { Select, MultiSelect, ComboBox } from 'carbon-components-react';
 import { multiOnChange } from '../files/select';
 
 describe('<Select />', () => {
@@ -31,6 +31,31 @@ describe('<Select />', () => {
     expect(wrapper.find(Select)).toHaveLength(1);
   });
 
+  ['isSearchable', 'isClearable'].forEach((setting) => {
+    it(`renders select ${setting}`, () => {
+      const schema = {
+        fields: [
+          {
+            component: componentTypes.SELECT,
+            name: 'select',
+            label: 'select',
+            [setting]: true,
+            options: [
+              { label: 'option 1', value: 1 },
+              { label: 'option 2', value: 2 }
+            ]
+          }
+        ]
+      };
+
+      const wrapper = mount(
+        <FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
+      );
+
+      expect(wrapper.find(ComboBox)).toHaveLength(1);
+    });
+  });
+
   it('renders multi select', () => {
     const schema = {
       fields: [
@@ -55,29 +80,31 @@ describe('<Select />', () => {
     expect(wrapper.find(MultiSelect)).toHaveLength(1);
   });
 
-  it('renders multi select - searchable', () => {
-    const schema = {
-      fields: [
-        {
-          component: componentTypes.SELECT,
-          name: 'select',
-          label: 'select',
-          initialValue: [1],
-          isMulti: true,
-          isSearchable: true,
-          options: [
-            { label: 'option 1', value: 1 },
-            { label: 'option 2', value: 2 }
-          ]
-        }
-      ]
-    };
-
-    const wrapper = mount(
-      <FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
-    );
-
-    expect(wrapper.find(MultiSelect.Filterable)).toHaveLength(1);
+  ['isSearchable', 'isClearable'].forEach((setting) => {
+    it(`renders multi select - ${setting}`, () => {
+      const schema = {
+        fields: [
+          {
+            component: componentTypes.SELECT,
+            name: 'select',
+            label: 'select',
+            initialValue: [1],
+            isMulti: true,
+            [setting]: true,
+            options: [
+              { label: 'option 1', value: 1 },
+              { label: 'option 2', value: 2 }
+            ]
+          }
+        ]
+      };
+
+      const wrapper = mount(
+        <FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
+      );
+
+      expect(wrapper.find(MultiSelect.Filterable)).toHaveLength(1);
+    });
   });
 
   describe('multichange', () => {

packages/react-renderer-demo/src/pages/mappers/carbon-component-mapper.md

@@ -38,41 +38,10 @@ This field will show the error immediately.
 
 ## Select
 
-### No isClearable
+### isClearable and isSearchable turn on each other
 
-Carbon select does not support `isClearable` option, instead of it use an option with null.
+Carbon doesn't provide a component that is searchable but not clearable and vice versa. Therefore, if one of these two options is turned on, it automatically triggers the other.
 
-🛑
-
-```jsx
-{
-   component: 'select',
-   label: 'select',
-   isClearable: true,
-   options: [
-        {value: 'option 1', label: 'first option'},
-        {value: 'option 2', label: 'second option'}
-    ]
-}
-```
-
-🆗
-
-```jsx
-{
-   component: 'select',
-   label: 'select',
-   options: [
-         {label: 'none', value: null},
-         {value: 'option 1', label: 'first option'},
-         {value: 'option 2', label: 'second option'}
-    ]
-}
-```
-
-### Single select cannot be isSearchable
-
-No known workaround.
 
 ### No async filtering options in multiselect