fix(common): make props to control deselection of values

Author: rvsia

packages/common/src/select/index.js

@@ -40,6 +40,7 @@ const Select = ({
   value,
   onChange,
   loadOptionsChangeCounter,
+  noValueUpdates,
   ...props
 }) => {
   const [state, dispatch] = useReducer(reducer, {
@@ -56,13 +57,15 @@ const Select = ({
 
     return loadOptions().then((data) => {
       if (isMounted) {
-        if (value && Array.isArray(value)) {
-          const selectValue = value.filter((value) =>
-            typeof value === 'object' ? data.find((option) => value.value === option.value) : data.find((option) => value === option.value)
-          );
-          onChange(selectValue.length === 0 ? undefined : selectValue);
-        } else if (value && !data.find(({ value: internalValue }) => internalValue === value)) {
-          onChange(undefined);
+        if (!noValueUpdates) {
+          if (value && Array.isArray(value)) {
+            const selectValue = value.filter((value) =>
+              typeof value === 'object' ? data.find((option) => value.value === option.value) : data.find((option) => value === option.value)
+            );
+            onChange(selectValue.length === 0 ? undefined : selectValue);
+          } else if (value && !data.find(({ value: internalValue }) => internalValue === value)) {
+            onChange(undefined);
+          }
         }
 
         dispatch({ type: 'updateOptions', payload: data });
@@ -88,7 +91,7 @@ const Select = ({
 
   useEffect(() => {
     if (state.isInitialLoaded) {
-      if (value && !propsOptions.map(({ value }) => value).includes(value)) {
+      if (!noValueUpdates && value && !propsOptions.map(({ value }) => value).includes(value)) {
         onChange(undefined);
       }
 
@@ -176,7 +179,8 @@ Select.propTypes = {
   selectVariant: PropTypes.string,
   updatingMessage: PropTypes.node,
   noOptionsMessage: PropTypes.node,
-  isSearchable: PropTypes.bool
+  isSearchable: PropTypes.bool,
+  noValueUpdates: PropTypes.bool
 };
 
 Select.defaultProps = {

packages/pf3-component-mapper/src/tests/form-fields/select/select.test.js

@@ -164,6 +164,15 @@ describe('<SelectField />', () => {
       expect(changeSpy).toHaveBeenCalledWith(undefined);
     });
 
+    it('should not change the value when new options do not include it and noValueUpdates is set', () => {
+      const wrapper = mount(<Wrapper {...initialProps} noValueUpdates input={{ ...initialProps.input, value: 1 }} />);
+
+      wrapper.setProps({ options: NEW_OPTIONS });
+      wrapper.update();
+
+      expect(changeSpy).not.toHaveBeenCalled();
+    });
+
     it('not should change the value when new options include it', () => {
       const wrapper = mount(<Wrapper {...initialProps} input={{ ...initialProps.input, value: 2 }} />);
 
@@ -189,7 +198,23 @@ describe('<SelectField />', () => {
       });
     });
 
-    it('should reset the value when loadOptions prop is changed and new options do not include the value', (done) => {
+    it('should not reset the value when loadOptions prop is changed and new options do not include the value - noValueUpdates is set', (done) => {
+      const wrapper = mount(<Wrapper {...initialProps} noValueUpdates loadOptions={asyncLoading} input={{ ...initialProps.input, value: 1 }} />);
+
+      setImmediate(() => {
+        wrapper.update();
+        wrapper.setProps({ loadOptions: asyncLoadingNew });
+
+        setImmediate(() => {
+          wrapper.update();
+
+          expect(changeSpy).not.toHaveBeenCalledWith();
+          done();
+        });
+      });
+    });
+
+    it('should not reset the value when loadOptions prop is changed and new options include the value', (done) => {
       const wrapper = mount(<Wrapper {...initialProps} loadOptions={asyncLoading} input={{ ...initialProps.input, value: 2 }} />);
 
       setImmediate(() => {

packages/react-renderer-demo/src/app/src/doc-components/pf3-select.md

@@ -6,6 +6,7 @@ PF3 Select allows to load the options asynchronously.
 |---------|----|-----------|
 |loadOptions|`func`|A function returning `Promise`, only on mount.|
 |loadingMessage|`string`|A message shown during the loading.|
+|noValueUpdates|`bool`|When set on true, the select won't deselect values not found in options.|
 
 **loadOptions example**
 

packages/react-renderer-demo/src/app/src/doc-components/pf4-select.md

@@ -15,6 +15,7 @@ PF4 Select allows to load the options asynchronously.
 |loadOptions|`func`|A function returning `Promise`: `(searchValue) => new Promise`|
 |loadingMessage|`node`|A message shown during the initial loading.|
 |updatingMessage|`node`|A message shown during the loading|
+|noValueUpdates|`bool`|When set on true, the select won't deselect values not found in options.|
 
 **loadOptions example**