Merge pull request #1023 from data-driven-forms/carbon-select-searchable

fix(carbon): combobox initial value label

Author: Hyperkid123

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

@@ -10,12 +10,15 @@ import prepareProps from '../prepare-props';
 
 export const multiOnChange = (input, simpleValue) => ({ selectedItem, selectedItems }) => {
   if (simpleValue) {
-    return input.onChange(selectedItems.map(({ value }) => value) || selectedItem.value);
+    return input.onChange(selectedItems?.map(({ value }) => value) || selectedItem.value);
   } else {
     return input.onChange(selectedItems || selectedItem);
   }
 };
 
+const getMultiValue = (value, options) =>
+  (Array.isArray(value) ? value : [value]).map((item) => (typeof item === 'object' ? item : options.find(({ value }) => value === item))) || [];
+
 const ClearedMultiSelectFilterable = ({
   invalidText,
   hideSelectedOptions,
@@ -44,7 +47,7 @@ const ClearedMultiSelectFilterable = ({
     invalid={Boolean(invalidText)}
     invalidText={invalidText}
     items={options}
-    initialSelectedItems={Array.isArray(rest.value) ? rest.value : []}
+    initialSelectedItems={getMultiValue(rest.value, options)}
   />
 );
 
@@ -95,7 +98,7 @@ const ClearedMultiSelect = ({
     invalid={Boolean(invalidText)}
     invalidText={invalidText}
     items={options}
-    initialSelectedItems={Array.isArray(rest.value) ? rest.value : []}
+    initialSelectedItems={getMultiValue(rest.value, options)}
   />
 );
 
@@ -118,6 +121,8 @@ ClearedMultiSelect.propTypes = {
   isDisabled: PropTypes.bool
 };
 
+const getSelectValue = (value, isMulti) => (isMulti ? value : Array.isArray(value) ? value[0] : value);
+
 const ClearedSelect = ({
   isSearchable,
   isClearable,
@@ -134,9 +139,17 @@ const ClearedSelect = ({
   closeMenuOnSelect,
   originalOnChange,
   placeholder,
+  value,
   ...rest
 }) => (
-  <CarbonSelect disabled={isFetching} {...rest} id={rest.name} invalid={Boolean(invalidText)} invalidText={invalidText}>
+  <CarbonSelect
+    value={getSelectValue(value, isMulti)}
+    disabled={isFetching}
+    {...rest}
+    id={rest.name}
+    invalid={Boolean(invalidText)}
+    invalidText={invalidText}
+  >
     {isFetching && <SelectItem text={placeholder} value={''} />}
     {options.map((option, index) => (
       <SelectItem key={option.value || index} text={option.label} {...option} />
@@ -162,9 +175,18 @@ ClearedSelect.propTypes = {
   isDisabled: PropTypes.bool,
   isRequired: PropTypes.bool,
   isSearchable: PropTypes.bool,
-  isClearable: PropTypes.bool
+  isClearable: PropTypes.bool,
+  value: PropTypes.any
 };
 
+const getComboInitialValue = (value, options = []) => {
+  const result = Array.isArray(value) ? value[0] : value;
+  return typeof result === 'object' ? result : options.find(({ value }) => value === result) || result;
+};
+
+/**
+ * Combobox cannot be multi value
+ */
 const ClearedSelectSearchable = ({
   isSearchable,
   isClearable,
@@ -174,7 +196,7 @@ const ClearedSelectSearchable = ({
   hideSelectedOptions,
   noOptionsMessage,
   onInputChange,
-  options,
+  options = [],
   isFetching,
   invalid,
   classNamePrefix,
@@ -190,7 +212,7 @@ const ClearedSelectSearchable = ({
     id={rest.name}
     invalid={Boolean(invalidText)}
     invalidText={invalidText}
-    initialSelectedItem={rest.value}
+    initialSelectedItem={getComboInitialValue(rest.value, options)}
     items={options}
     placeholder={placeholder}
     titleText={labelText}

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

@@ -56,6 +56,71 @@ describe('<Select />', () => {
     });
   });
 
+  it('should render initial value label text when only value is passed as initial value', () => {
+    const schema = {
+      fields: [
+        {
+          component: componentTypes.SELECT,
+          name: 'select',
+          label: 'select',
+          isSearchable: true,
+          isClearable: true,
+          options: [
+            { label: 'option 1', value: 1 },
+            { label: 'option 2', value: 2 }
+          ]
+        }
+      ]
+    };
+
+    const wrapper = mount(
+      <FormRenderer
+        initialValues={{ select: 1 }}
+        onSubmit={jest.fn()}
+        FormTemplate={(props) => <FormTemplate {...props} />}
+        schema={schema}
+        componentMapper={componentMapper}
+      />
+    );
+
+    const valueInput = wrapper.find('input[name="select"]');
+    expect(valueInput).toHaveLength(1);
+    expect(valueInput.props().value).toEqual('option 1');
+  });
+
+  it('should render initial value label text when only value is passed as initial value with simpleValue option', () => {
+    const schema = {
+      fields: [
+        {
+          component: componentTypes.SELECT,
+          name: 'select',
+          label: 'select',
+          isSearchable: true,
+          isClearable: true,
+          simpleValue: true,
+          options: [
+            { label: 'option 1', value: 1 },
+            { label: 'option 2', value: 2 }
+          ]
+        }
+      ]
+    };
+
+    const wrapper = mount(
+      <FormRenderer
+        initialValues={{ select: 1 }}
+        onSubmit={jest.fn()}
+        FormTemplate={(props) => <FormTemplate {...props} />}
+        schema={schema}
+        componentMapper={componentMapper}
+      />
+    );
+
+    const valueInput = wrapper.find('input[name="select"]');
+    expect(valueInput).toHaveLength(1);
+    expect(valueInput.props().value).toEqual('option 1');
+  });
+
   it('renders multi select', () => {
     const schema = {
       fields: [