Merge pull request #1367 from data-driven-forms/fix-mui-select

Fix mui select

Author: Hyperkid123

packages/common/src/select/select.js

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -47,6 +47,12 @@ const Select = ({
   });
 
   const renderNoOptionsMessage = () => (Object.values(state.promises).some((value) => value) ? () => updatingMessage : () => noOptionsMessage);
+  // When isMulti is true, the "getSelect" always creates new value array, we need to memoize it to not create new array instance
+  // Memo is required to fix https://github.com/data-driven-forms/react-forms/issues/1366
+  // Keeping prev values in ref and calling lodash.isEqual is not reliable as it ca return false positive beucase it only has true/false result.
+  // If we have multiple updates during one reconciliation pahse the search input reset will trigger on initial key stroke
+  // JSON.stringify is expensive but seems to be working better.
+  const selectValueInternal = useMemo(() => selectValue, [JSON.stringify(selectValue)]);
 
   if (state.isLoading) {
     return (
@@ -58,6 +64,9 @@ const Select = ({
         placeholder={loadingMessage}
         options={state.options}
         onChange={() => {}}
+        onInputChange={onInputChange}
+        value={selectValueInternal}
+        isMulti={isMulti}
         {...loadingProps}
         noOptionsMessage={renderNoOptionsMessage()}
         {...(state.originalOptions && { originalOptions: state.originalOptions })}
@@ -75,7 +84,7 @@ const Select = ({
       options={state.options}
       classNamePrefix={classNamePrefix}
       isMulti={isMulti}
-      value={selectValue}
+      value={selectValueInternal}
       onChange={selectOnChange}
       onInputChange={onInputChange}
       isFetching={isFetching}

packages/common/src/tests/select/select.test.js

@@ -471,6 +471,8 @@ describe('Select test', () => {
         isSearchable: false,
         options: [],
         placeholder: undefined,
+        isMulti: undefined,
+        value: [],
       });
 
       await act(async () => {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import FormFieldGrid from '../form-field-grid/form-field-grid';
@@ -81,7 +81,10 @@ const InternalSelect = ({
   ...rest
 }) => {
   const invalid = validationError(meta, validateOnMount);
-  const internalValue = parseInternalValue(value, isMulti);
+  // When isMulti is true, the "parseInternalValue" always creates new value array, we need to memoize it to not create new array instance
+  // Memo is required to fix https://github.com/data-driven-forms/react-forms/issues/1366
+  const internalValue = useMemo(() => parseInternalValue(value, isMulti), [value, isMulti]);
+
   return (
     <FormFieldGrid {...FormFieldGridProps}>
       <Autocomplete