Data entity group form bug #779

odd-platform-ui/src/components/DataEntityDetails/DataEntityGroupForm/DataEntityGroupForm.tsx

@@ -80,7 +80,7 @@ const DataEntityGroupForm: React.FC<DataEntityGroupFormProps> = ({
     [dataEntityGroupDetails]
   );
 
-  const { handleSubmit, control, reset, formState, setValue } =
+  const { handleSubmit, control, reset, formState, setValue, register } =
     useForm<DataEntityGroupFormData>({
       mode: 'onChange',
       reValidateMode: 'onChange',
@@ -205,19 +205,12 @@ const DataEntityGroupForm: React.FC<DataEntityGroupFormProps> = ({
           </AppTextField>
         )}
       />
-      <Controller
-        control={control}
-        name="entities"
-        rules={{ required: true, validate: () => fields.length > 0 }}
-        render={({ field }) => (
-          <SearchSuggestionsAutocomplete
-            placeholder="Search entities"
-            label="Entities"
-            controllerProps={field}
-            append={append}
-            addEntities
-          />
-        )}
+      <SearchSuggestionsAutocomplete
+        placeholder="Search entities"
+        label="Entities"
+        formOnChange={register('entities').onChange}
+        append={append}
+        addEntities
       />
       <EntityItemsContainer sx={{ mt: 1.25 }}>
         {fields?.map((entity, index) => (

odd-platform-ui/src/components/DataEntityDetails/DataEntityGroupForm/EntityItem/EntityItem.tsx

@@ -16,8 +16,8 @@ const EntityItem: React.FC<TagItemProps> = ({
   entity,
 }) => (
   <Container container>
-    <Grid container>
-      <Typography variant="body1" sx={{ mr: 1 }}>
+    <Grid container flexWrap="nowrap" sx={{ width: 'calc(100% - 24px)' }}>
+      <Typography variant="body1" sx={{ mr: 1 }} noWrap>
         {entity.internalName || entity.externalName}
       </Typography>
       {entity.entityClasses?.map(entityClass => (

odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewGroups/AddDataEntityToGroupForm/AddDataEntityToGroupForm.tsx

@@ -9,8 +9,8 @@ import {
   getDataEntityAddToGroupStatuses,
   getDataEntityClassesList,
 } from 'redux/selectors';
-import SearchSuggestionsAutocomplete from 'components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete';
 import { addDataEntityToGroup } from 'redux/thunks';
+import SearchSuggestionsAutocomplete from 'components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete';
 
 interface AddDataEntityToGroupFormProps {
   btnCreateEl: JSX.Element;
@@ -95,7 +95,7 @@ const AddDataEntityToGroupForm: React.FC<
           <SearchSuggestionsAutocomplete
             placeholder="Search groups"
             label="Group name"
-            controllerProps={field}
+            formOnChange={field.onChange}
             searchParams={{
               entityClassId: dataEntityGroupClassId,
               manuallyCreated: true,

odd-platform-ui/src/components/shared/Autocomplete/SearchSuggestionsAutocomplete/SearchSuggestionsAutocomplete.tsx

@@ -8,27 +8,22 @@ import EntityClassItem from 'components/shared/EntityClassItem/EntityClassItem';
 import { useDebouncedCallback } from 'use-debounce';
 import AppTextField from 'components/shared/AppTextField/AppTextField';
 import ClearIcon from 'components/shared/Icons/ClearIcon';
-import { ControllerRenderProps } from 'react-hook-form';
 import AppButton from 'components/shared/AppButton/AppButton';
-import { UseFieldArrayAppend } from 'react-hook-form/dist/types/fieldArray';
 import { useAppDispatch, useAppSelector } from 'lib/redux/hooks';
 import { fetchSearchSuggestions } from 'redux/thunks';
 import {
   getSearchSuggestions,
   getSearchSuggestionsFetchingStatuses,
 } from 'redux/selectors';
-import { DataEntityGroupFormData } from 'components/DataEntityDetails/DataEntityGroupForm/DataEntityGroupForm';
-import { AddDataEntityToGroupFormData } from 'components/DataEntityDetails/Overview/OverviewGroups/AddDataEntityToGroupForm/AddDataEntityToGroupForm';
+import { UseFieldArrayReturn } from 'react-hook-form';
 
 interface SearchSuggestionsAutocompleteProps {
   placeholder: string;
   label?: string;
   addEntities?: boolean;
-  append?: UseFieldArrayAppend<DataEntityGroupFormData['entities']>;
+  append?: UseFieldArrayReturn['append'];
   searchParams?: SearchApiGetSearchSuggestionsRequest;
-  controllerProps:
-    | ControllerRenderProps<DataEntityGroupFormData, 'entities'>
-    | ControllerRenderProps<AddDataEntityToGroupFormData, 'group'>;
+  formOnChange: (val: any) => void;
 }
 
 const SearchSuggestionsAutocomplete: React.FC<
@@ -38,8 +33,8 @@ const SearchSuggestionsAutocomplete: React.FC<
   label,
   addEntities,
   append,
-  controllerProps,
   searchParams,
+  formOnChange,
 }) => {
   const dispatch = useAppDispatch();
 
@@ -97,17 +92,15 @@ const SearchSuggestionsAutocomplete: React.FC<
   };
 
   const handleOptionChange = React.useCallback(
-    (onChange: (val?: DataEntityRef) => void) =>
-      (
-        _: React.ChangeEvent<unknown>,
-        value: Partial<DataEntityRef> | string | null
-      ) => {
-        setSelectedOption(value as DataEntityRef);
-        onChange(value as DataEntityRef);
-      },
+    (
+      _: React.ChangeEvent<unknown>,
+      value: Partial<DataEntityRef> | string | null
+    ) => {
+      setSelectedOption(value as DataEntityRef);
+      formOnChange(value);
+    },
     []
   );
-
   const handleAddEntity = () => {
     if (append) {
       append(selectedOption as DataEntityRef);
@@ -144,7 +137,6 @@ const SearchSuggestionsAutocomplete: React.FC<
 
   return (
     <Autocomplete
-      {...controllerProps}
       fullWidth
       value={{ externalName: searchText }}
       open={autocompleteOpen}
@@ -155,7 +147,7 @@ const SearchSuggestionsAutocomplete: React.FC<
         setAutocompleteOpen(false);
       }}
       onInputChange={handleInputChange}
-      onChange={handleOptionChange(controllerProps.onChange)}
+      onChange={handleOptionChange}
       getOptionLabel={getOptionLabel}
       options={options}
       loading={isSearchSuggestionsLoading}