Merge pull request #297 from rvsia/refreshOptionsPF4Select

fix(pf4): allow to update options, loadOptions props

Author: Hyperkid123

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

@@ -2,6 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactSelect from 'react-select';
 import CreatableSelect from 'react-select/creatable';
+import isEqual from 'lodash/isEqual';
+
+import fnToString from '@data-driven-forms/common/src/utils/fn-to-string';
 
 import MultiValueContainer from './multi-value-container';
 import ValueContainer from './value-container';
@@ -25,19 +28,41 @@ export class Select extends React.Component {
   };
 
   componentDidMount() {
-    const { loadOptions } = this.props;
-    if (!loadOptions) {
-      this.setState({
-        isLoading: false,
-      });
+    if (!this.props.loadOptions) {
+      this.setState({ isLoading: false });
     } else {
-      return loadOptions()
-      .then((data) => {
-        return this.setState({
-          allOptions: data,
-          isLoading: false,
-        });});
+      return this.updateOptions();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!isEqual(this.props.options, prevProps.options)) {
+      if (!this.props.options.map(({ value }) => value).includes(this.props.value)) {
+        this.props.onChange(undefined);
+      }
+
+      this.setState({ allOptions: this.props.options });
     }
+
+    if (this.props.loadOptions && fnToString(this.props.loadOptions) !== fnToString(prevProps.loadOptions)){
+      return this.updateOptions();
+    }
+  }
+
+  updateOptions = () => {
+    this.setState({ isLoading: true });
+
+    return this.props.loadOptions().then(data => {
+      if (!data.map(({ value }) => value).includes(this.props.value)) {
+        this.props.onChange(undefined);
+      }
+
+      return this.setState({
+        allOptions: data,
+        isLoading: false,
+        promises: {},
+      });
+    });
   }
 
   componentWillUnmount() {

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { components } from 'react-select';
 import ReactSelect from 'react-select';
+import isEqual from 'lodash/isEqual';
+
 import DataDrivenSelect, { Select } from '../../form-fields/select/select';
 
 describe('<Select />', () => {
@@ -166,4 +168,100 @@ describe('<Select />', () => {
       });
     });
   });
+
+  describe('reloading props', () => {
+    const NEW_OPTIONS = [{ label: 'Different label', value: 2 }];
+    let asyncLoading;
+    let asyncLoadingNew;
+
+    beforeEach(() => {
+      asyncLoading = () => Promise.resolve(initialProps.options);
+      asyncLoadingNew = () => Promise.resolve(NEW_OPTIONS);
+    });
+
+    it('should change the options when options prop is changed', () => {
+      const wrapper = mount(<Select { ...initialProps } />);
+
+      let innerSelectProps = wrapper.find(ReactSelect).props().options;
+
+      expect(isEqual(innerSelectProps, initialProps.options)).toEqual(true);
+
+      wrapper.setProps({ options: NEW_OPTIONS });
+      wrapper.update();
+      innerSelectProps = wrapper.find(ReactSelect).props().options;
+
+      expect(innerSelectProps).toEqual(NEW_OPTIONS);
+    });
+
+    it('should change the options when loadOptions prop is changed', (done) => {
+      const wrapper = mount(<Select { ...initialProps } loadOptions={ asyncLoading }/>);
+
+      setImmediate(() => {
+        wrapper.update();
+        let innerSelectProps = wrapper.find(ReactSelect).props().options;
+
+        expect(isEqual(innerSelectProps, initialProps.options)).toEqual(true);
+
+        wrapper.setProps({ loadOptions: asyncLoadingNew });
+
+        setImmediate(() => {
+          wrapper.update();
+          innerSelectProps = wrapper.find(ReactSelect).props().options;
+
+          expect(isEqual(innerSelectProps, NEW_OPTIONS)).toEqual(true);
+          done();
+        });
+      });
+    });
+
+    it('should change the value when new options do not include it', () => {
+      const wrapper = mount(<Select { ...initialProps } value={ 1 }/>);
+
+      wrapper.setProps({ options: NEW_OPTIONS });
+      wrapper.update();
+
+      expect(onChange).toHaveBeenCalledWith(undefined);
+    });
+
+    it('not should change the value when new options include it', () => {
+      const wrapper = mount(<Select { ...initialProps } value={ 2 }/>);
+
+      wrapper.setProps({ options: NEW_OPTIONS });
+      wrapper.update();
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('should reset the value when loadOptions prop is changed and new options do not include the value', (done) => {
+      const wrapper = mount(<Select { ...initialProps } loadOptions={ asyncLoading } value={ 1 }/>);
+
+      setImmediate(() => {
+        wrapper.update();
+        wrapper.setProps({ loadOptions: asyncLoadingNew });
+
+        setImmediate(() => {
+          wrapper.update();
+
+          expect(onChange).toHaveBeenCalledWith(undefined);
+          done();
+        });
+      });
+    });
+
+    it('should not reset the value when loadOptions prop is changed and new options includes the value', (done) => {
+      const wrapper = mount(<Select { ...initialProps } loadOptions={ asyncLoading } value={ 2 }/>);
+
+      setImmediate(() => {
+        wrapper.update();
+        wrapper.setProps({ loadOptions: asyncLoadingNew });
+
+        setImmediate(() => {
+          wrapper.update();
+
+          expect(onChange).not.toHaveBeenCalled();
+          done();
+        });
+      });
+    });
+  });
 });