Merge pull request #298 from data-driven-forms/fix-pf4-async-multi

fix(pf4): Multi async select initial value change.

Author: rvsia

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

@@ -41,6 +41,9 @@ class App extends React.Component {
             </Toolbar>
             <FormRenderer
                 onSubmit={console.log}
+                initialValues={{
+                    'async-drop-down': 'async-option-2'
+                }}
                 formFieldsMapper={{
                     ...formFieldsMapper,
                     summary: Summary

packages/pf4-component-mapper/src/form-fields/select/select.js

@@ -53,7 +53,12 @@ export class Select extends React.Component {
     this.setState({ isLoading: true });
 
     return this.props.loadOptions().then(data => {
-      if (!data.map(({ value }) => value).includes(this.props.value)) {
+      if (Array.isArray(this.props.value)) {
+        const selectValue = this.props.value.filter(value => typeof value === 'object'
+          ? data.find((option) => value.value === option.value)
+          : data.find((option) => value === option.value));
+        this.props.onChange(selectValue.length === 0 ? undefined : selectValue);
+      } else if (!data.find(({ value }) => value === this.props.value)) {
         this.props.onChange(undefined);
       }
 

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

@@ -138,7 +138,7 @@ describe('<Select />', () => {
     });
   });
 
-  it('should load Async options correctly', (done) => {
+  it('should load single select Async options correctly', (done) => {
     const asyncLoading = jest.fn().mockReturnValue(Promise.resolve([{ label: 'label' }]));
 
     const wrapper = mount(<Select { ...initialProps } options={ undefined } loadOptions={ asyncLoading }/>);
@@ -150,6 +150,75 @@ describe('<Select />', () => {
     });
   });
 
+  it('should load multi select Async options correctly and set initial value to undefined', (done) => {
+    const asyncLoading = jest.fn().mockReturnValue(Promise.resolve([{ label: 'label', value: '123' }]));
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Select
+        { ...initialProps }
+        value={ [ 'does not exists in options' ] }
+        isMulti
+        options={ undefined }
+        loadOptions={ asyncLoading }
+        onChange={ onChange }
+        simpleValue
+      />
+    );
+
+    setImmediate(() => {
+      wrapper.update();
+      expect(wrapper.find(Select).first().instance().state.allOptions).toEqual([{ label: 'label', value: '123' }]);
+      expect(onChange).toHaveBeenCalledWith(undefined);
+      done();
+    });
+  });
+
+  it('should load multi select Async options correctly and set initial value to ["123"]', (done) => {
+    const asyncLoading = jest.fn().mockReturnValue(Promise.resolve([{ label: 'label', value: '123' }]));
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Select
+        { ...initialProps }
+        value={ [ '123', 'Not in options' ] }
+        isMulti
+        options={ undefined }
+        loadOptions={ asyncLoading }
+        onChange={ onChange }
+        simpleValue
+      />
+    );
+
+    setImmediate(() => {
+      wrapper.update();
+      expect(wrapper.find(Select).first().instance().state.allOptions).toEqual([{ label: 'label', value: '123' }]);
+      expect(onChange).toHaveBeenCalledWith([ '123' ]);
+      done();
+    });
+  });
+
+  it('should load multi select Async options correctly and set initial value to ["123"] if initial value is an object', (done) => {
+    const asyncLoading = jest.fn().mockReturnValue(Promise.resolve([{ label: 'label', value: '123' }]));
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Select
+        { ...initialProps }
+        value={ [{ value: '123', label: 'label' }, 'Not in options' ] }
+        isMulti
+        options={ undefined }
+        loadOptions={ asyncLoading }
+        onChange={ onChange }
+        simpleValue
+      />
+    );
+
+    setImmediate(() => {
+      wrapper.update();
+      expect(wrapper.find(Select).first().instance().state.allOptions).toEqual([{ label: 'label', value: '123' }]);
+      expect(onChange).toHaveBeenCalledWith([{ label: 'label', value: '123' }]);
+      done();
+    });
+  });
+
   it('should load Async options after filtering', (done) => {
     const asyncLoading = jest.fn().mockReturnValue(Promise.resolve([{ label: 'label' }]));