Merge pull request #1410 from victoria-dos/load-options-bug

Hyperkid123 · web-flow · commit 0e94d3438f43 · 2023-09-18T15:23:50.000+02:00
Add compareValues prop to useSelect's reducer
diff --git a/packages/common/src/select/deep-equal.d.ts b/packages/common/src/select/deep-equal.d.ts
@@ -0,0 +1,3 @@
+declare const deepEqual: (valueA: any, valueB: any) => boolean;
+
+export default deepEqual;
diff --git a/packages/common/src/select/deep-equal.js b/packages/common/src/select/deep-equal.js
@@ -0,0 +1,35 @@
+const deepEqual = (a, b, depth = 0) => {
+  if (depth > 4) {
+    console.error('Recursion limit of 5 has been exceeded.');
+    return false;
+  }
+
+  if (a === b) {
+    return true;
+  }
+
+  if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+    return a.every((item, index) => deepEqual(item, b[index]));
+  }
+
+  if (typeof a === 'object' && typeof b === 'object' && a !== null && b !== null) {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+
+    if (keysA.length !== keysB.length) {
+      return false;
+    }
+
+    for (const key of keysA) {
+      if (!keysB.includes(key) || !deepEqual(a[key], b[key], depth + 1)) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  return false;
+};
+
+export default deepEqual;
diff --git a/packages/common/src/select/select.d.ts b/packages/common/src/select/select.d.ts
@@ -29,6 +29,7 @@ export interface SelectProps {
   SelectComponent?: React.ComponentType;
   noValueUpdates?: boolean;
   optionsTransformer?: (options: AnyObject[]) => option[];
+  compareValues?: (valueA: any, valueB: any) => boolean;
 }
 
 declare const Select: React.ComponentType<SelectProps>;
diff --git a/packages/common/src/select/select.js b/packages/common/src/select/select.js
@@ -4,6 +4,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import useSelect from '../use-select/use-select';
+import deepEqual from './deep-equal';
 
 const Select = ({
   invalid,
@@ -24,6 +25,7 @@ const Select = ({
   SelectComponent,
   noValueUpdates,
   optionsTransformer,
+  compareValues = deepEqual,
   ...props
 }) => {
   const {
@@ -44,6 +46,7 @@ const Select = ({
     pluckSingleValue,
     isMulti,
     simpleValue,
+    compareValues,
   });
 
   const renderNoOptionsMessage = () => (Object.values(state.promises).some((value) => value) ? () => updatingMessage : () => noOptionsMessage);
@@ -119,6 +122,7 @@ Select.propTypes = {
   SelectComponent: PropTypes.elementType.isRequired,
   noValueUpdates: PropTypes.bool,
   optionsTransformer: PropTypes.func,
+  compareValues: PropTypes.func,
 };
 
 Select.defaultProps = {
@@ -129,6 +133,7 @@ Select.defaultProps = {
   placeholder: 'Choose...',
   isSearchable: false,
   isClearable: false,
+  compareValues: deepEqual,
 };
 
 export default Select;
diff --git a/packages/common/src/tests/select/deep-equal.test.js b/packages/common/src/tests/select/deep-equal.test.js
@@ -0,0 +1,78 @@
+import cloneDeep from 'lodash/cloneDeep';
+import deepEqual from '../../select/deep-equal';
+
+describe('deepEqual', () => {
+  describe('primitives', () => {
+    const tuplesBase = [1, 'a', false, undefined, null];
+    const positiveCases = tuplesBase.map((value) => ({
+      input: [value, value],
+      output: true,
+    }));
+    const negativeCases = tuplesBase.map((value) => ({
+      input: [value, value + 1],
+      output: false,
+    }));
+    positiveCases.forEach(({ input, output }) => {
+      it(`should return ${output} for a ${input} input`, () => {
+        expect(deepEqual(...input)).toEqual(output);
+      });
+    });
+
+    negativeCases.forEach(({ input, output }) => {
+      it(`should return ${output} for a ${input} input`, () => {
+        expect(deepEqual(...input)).toEqual(output);
+      });
+    });
+  });
+
+  describe('objects', () => {
+    it('should return true for equal object structure', () => {
+      const valueA = {
+        value: {
+          foo: 'bar',
+          baz: [1, 2, { quaz: { 2: 3 } }],
+        },
+      };
+
+      expect(deepEqual(valueA, cloneDeep(valueA))).toEqual(true);
+    });
+
+    it('should return false for non equal object structure', () => {
+      const valueA = {
+        value: {
+          foo: 'bar',
+          baz: [1, 2, { quaz: { 2: 3 } }],
+        },
+      };
+
+      const valueB = {
+        ...valueA,
+        value: {
+          ...valueA.value,
+          baz: [1, 2, { quaz: {} }],
+        },
+      };
+
+      expect(deepEqual(valueA, valueB)).toEqual(false);
+    });
+
+    it('should log an error if an object is too deeply nested', () => {
+      const errorSpy = jest.spyOn(console, 'error');
+      const valueA = {
+        value: {
+          value: {
+            value: {
+              value: {
+                value: {},
+              },
+            },
+          },
+        },
+      };
+
+      expect(deepEqual(valueA, cloneDeep(valueA))).toEqual(false);
+      expect(errorSpy).toHaveBeenCalledWith('Recursion limit of 5 has been exceeded.');
+      errorSpy.mockReset();
+    });
+  });
+});
diff --git a/packages/common/src/tests/select/select.test.js b/packages/common/src/tests/select/select.test.js
@@ -3,6 +3,7 @@
 import React from 'react';
 import { render, screen, act, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { useFieldApi, FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
 
@@ -501,7 +502,146 @@ describe('Select test', () => {
       jest.useRealTimers();
     });
 
-    it('initial values is not in options', async () => {
+    it('initial value is object', async () => {
+      const loadOptions = jest.fn().mockImplementation(() =>
+        Promise.resolve([
+          { value: { value: '111' }, label: 'first' },
+          { value: { value: '1111' }, label: 'second' },
+        ])
+      );
+      field = { ...field, loadOptions, options: [] };
+
+      await act(async () => {
+        render(
+          <FormRenderer
+            {...rendererProps}
+            schema={{
+              fields: [
+                {
+                  ...field,
+                  isMulti: true,
+                  isSearchable: true,
+                  isClearable: true,
+                  initialValue: [{ value: { value: '111' }, label: 'first' }],
+                  component: componentTypes.SELECT,
+                  name: 'select',
+                },
+              ],
+            }}
+          />
+        );
+      });
+
+      expect(inputValue).toEqual([{ value: { value: '111' }, label: 'first' }]);
+    });
+
+    describe('options compareValues', () => {
+      const loadOptions = jest.fn().mockImplementation(() =>
+        Promise.resolve([
+          { value: { value: '111' }, label: 'first' },
+          { value: { value: '1111' }, label: 'second' },
+          { value: { value: '3' }, label: 'third' },
+        ])
+      );
+
+      const customCompareField = {
+        ...field,
+        component: componentTypes.SELECT,
+        name: 'select',
+        loadOptions,
+        options: [],
+        isMulti: true,
+        isSearchable: true,
+        isClearable: true,
+      };
+
+      it('custom function compares options with object value', async () => {
+        await act(async () => {
+          render(
+            <FormRenderer
+              {...rendererProps}
+              schema={{
+                fields: [
+                  {
+                    ...customCompareField,
+                    compareValues: (a, b) => {
+                      return a.value.value === b.value.value;
+                    },
+                    initialValue: [{ value: { value: '111' }, label: 'first' }],
+                  },
+                ],
+              }}
+            />
+          );
+        });
+
+        expect(inputValue).toEqual([{ value: { value: '111' }, label: 'first' }]);
+      });
+
+      it('default function compares options with object value', async () => {
+        await act(async () => {
+          render(
+            <FormRenderer
+              {...rendererProps}
+              schema={{
+                fields: [
+                  {
+                    ...customCompareField,
+                    initialValue: [{ value: { value: '111' }, label: 'first' }],
+                  },
+                ],
+              }}
+            />
+          );
+        });
+
+        expect(inputValue).toEqual([{ value: { value: '111' }, label: 'first' }]);
+      });
+
+      it('default function logs an error for highly nested values ', async () => {
+        const consoleSpy = jest.spyOn(console, 'error').mockImplementationOnce(() => undefined);
+        const nestedOptions = {
+          label: 'Nested',
+          value: {
+            value: {
+              value: {
+                value: {
+                  value: {
+                    value: 'foo',
+                  },
+                },
+              },
+            },
+          },
+        };
+        const loadOptions = jest.fn().mockImplementation(() => Promise.resolve([{ ...nestedOptions }]));
+        await act(async () => {
+          render(
+            <FormRenderer
+              {...rendererProps}
+              schema={{
+                fields: [
+                  {
+                    ...customCompareField,
+                    loadOptions,
+                    initialValue: [cloneDeep(nestedOptions)],
+                  },
+                ],
+              }}
+            />
+          );
+        });
+
+        // Console error should be triggered for large object depth
+        expect(consoleSpy).toHaveBeenCalledWith('Recursion limit of 5 has been exceeded.');
+        // Should have no value because he options are not matched if the depth limit was exceeded
+        expect(inputValue).toEqual('');
+
+        consoleSpy.mockReset();
+      });
+    });
+
+    it('initial values are not in options', async () => {
       const loadOptions = jest.fn().mockImplementation(() =>
         Promise.resolve([
           { value: '111', label: 'first' },
diff --git a/packages/common/src/use-select/reducer.js b/packages/common/src/use-select/reducer.js
@@ -40,10 +40,16 @@ const reducer = (state, { type, payload, options = [], optionsTransformer }) =>
           ...payload,
         },
         options: optionsTransformer
-          ? optionsTransformer([...state.options, ...options.filter(({ value }) => !state.options.find((option) => option.value === value))])
-          : [...state.options, ...options.filter(({ value }) => !state.options.find((option) => option.value === value))],
+          ? optionsTransformer([
+              ...state.options,
+              ...options.filter(({ value }) => !state.options.find((option) => payload.compareValues(option.value, value))),
+            ])
+          : [...state.options, ...options.filter(({ value }) => !state.options.find((option) => payload.compareValues(option.value, value)))],
         ...(optionsTransformer && {
-          originalOptions: [...state.options, ...options.filter(({ value }) => !state.options.find((option) => option.value === value))],
+          originalOptions: [
+            ...state.options,
+            ...options.filter(({ value }) => !state.options.find((option) => payload.compareValues(option.value, value))),
+          ],
         }),
       };
     default:
diff --git a/packages/common/src/use-select/use-select.d.ts b/packages/common/src/use-select/use-select.d.ts
@@ -13,6 +13,7 @@ interface UseSelectProps {
     pluckSingleValue?: boolean;
     isMulti?: boolean;
     simpleValue?: boolean;
+    compareValues?: (value1: any, value2: any) => any;
 }
 
 interface SelectState {
diff --git a/packages/common/src/use-select/use-select.js b/packages/common/src/use-select/use-select.js
@@ -67,6 +67,7 @@ const useSelect = ({
   pluckSingleValue,
   isMulti,
   simpleValue,
+  compareValues,
 }) => {
   const [state, originalDispatch] = useReducer(reducer, { optionsTransformer, propsOptions }, init);
   const dispatch = (action) => originalDispatch({ ...action, optionsTransformer });
@@ -81,10 +82,12 @@ const useSelect = ({
         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)
+              typeof value === 'object'
+                ? data.find((option) => compareValues(value.value, option.value))
+                : data.find((option) => compareValues(value, option.value))
             );
             onChange(selectValue.length === 0 ? undefined : selectValue);
-          } else if (value && !data.find(({ value: internalValue }) => internalValue === value)) {
+          } else if (value && !data.find(({ value: internalValue }) => compareValues(internalValue, value))) {
             onChange(undefined);
           }
         }
@@ -122,14 +125,14 @@ const useSelect = ({
 
   const onInputChange = (inputValue) => {
     if (inputValue && loadOptions && state.promises[inputValue] === undefined && isSearchable) {
-      dispatch({ type: 'setPromises', payload: { [inputValue]: true } });
+      dispatch({ type: 'setPromises', payload: { [inputValue]: true, compareValues } });
 
       loadOptions(inputValue)
         .then((options) => {
           if (isMounted.current) {
             dispatch({
               type: 'setPromises',
-              payload: { [inputValue]: false },
+              payload: { [inputValue]: false, compareValues },
               options,
             });
           }
diff --git a/packages/pf4-component-mapper/demo/demo-schemas/select-schema.js b/packages/pf4-component-mapper/demo/demo-schemas/select-schema.js
diff --git a/packages/react-renderer-demo/src/doc-components/examples-texts/select.md b/packages/react-renderer-demo/src/doc-components/examples-texts/select.md
diff --git a/packages/react-renderer-demo/src/pages/provided-mappers/component-api.md b/packages/react-renderer-demo/src/pages/provided-mappers/component-api.md

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+declare const deepEqual: (valueA: any, valueB: any) => boolean;`
	`2`	`+`
	`3`	`+export default deepEqual;`
Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@ export interface SelectProps {`
`29`	`29`	`SelectComponent?: React.ComponentType;`
`30`	`30`	`noValueUpdates?: boolean;`
`31`	`31`	`optionsTransformer?: (options: AnyObject[]) => option[];`
	`32`	`+ compareValues?: (valueA: any, valueB: any) => boolean;`
`32`	`33`	`}`
`33`	`34`
`34`	`35`	`declare const Select: React.ComponentType<SelectProps>;`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ interface UseSelectProps {`
`13`	`13`	`pluckSingleValue?: boolean;`
`14`	`14`	`isMulti?: boolean;`
`15`	`15`	`simpleValue?: boolean;`
	`16`	`+ compareValues?: (value1: any, value2: any) => any;`
`16`	`17`	`}`
`17`	`18`
`18`	`19`	`interface SelectState {`