update rendering

UN-OCHA · May 21, 2024 · 8ba1e33 · 8ba1e33
1 parent a3025cc
commit 8ba1e33
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 40 deletions.
diff --git a/libs/hpc-ui/src/lib/components/form-fields/async-single-select-field.tsx b/libs/hpc-ui/src/lib/components/form-fields/async-single-select-field.tsx
@@ -108,18 +108,19 @@ const AsyncSingleSelect = memo(
         }
       })();
     }, [loading]);
-    const handleChange = (
-      event: SelectChangeEvent<FormObjectValue | string | number>
-    ) => {
-      const {
-        target: { value },
-      } = event;
-      if (returnObject) {
-        setFieldValue(name, value);
-      } else {
-        setFieldValue(name, value);
-      }
-    };
+    const handleChange = useCallback(
+      (event: SelectChangeEvent<FormObjectValue | string | number>) => {
+        const {
+          target: { value },
+        } = event;
+        if (returnObject) {
+          setFieldValue(name, value);
+        } else {
+          setFieldValue(name, value);
+        }
+      },
+      [name, returnObject]
+    );
     const singleSelectConfig: SelectProps<FormObjectValue | string | number> =
       useMemo(
         () => ({

diff --git a/libs/hpc-ui/src/lib/components/form-fields/autocomplete-field.tsx b/libs/hpc-ui/src/lib/components/form-fields/autocomplete-field.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useMemo, memo } from 'react';
 import { Autocomplete, AutocompleteProps } from '@mui/material';
 import { useField, useFormikContext } from 'formik';
 import tw from 'twin.macro';
@@ -9,7 +9,7 @@ const StyledAutocomplete = tw(Autocomplete)`
       min-w-[10rem]
       w-full`;
 
-const AutocompleteSelect = React.memo(
+const AutocompleteSelect = memo(
   ({
     name,
     label,
@@ -34,32 +34,45 @@ const AutocompleteSelect = React.memo(
       boolean,
       boolean,
       boolean
-    > = {
-      ...field,
-      ...otherProps,
-      multiple: isMulti,
-      readOnly,
-      options: options,
-      isOptionEqualToValue: (option, value) => option.value === value.value,
-      getOptionLabel: (op) => (typeof op === 'string' ? op : op.displayLabel),
-      ChipProps: { size: 'small' },
-      onChange: (_, newValue) => {
-        // For multiple selections, newValue will be an array of selected values
-        setFieldValue(name, newValue);
-      },
+    > = useMemo(
+      () => ({
+        ...field,
+        ...otherProps,
+        multiple: isMulti,
+        readOnly,
+        options: options,
+        isOptionEqualToValue: (option, value) => option.value === value.value,
+        getOptionLabel: (op) => (typeof op === 'string' ? op : op.displayLabel),
+        ChipProps: { size: 'small' },
+        onChange: (_, newValue) => {
+          // For multiple selections, newValue will be an array of selected values
+          setFieldValue(name, newValue);
+        },
 
-      renderInput: (params) => (
-        <StyledTextField
-          {...params}
-          size="small"
-          label={label}
-          placeholder={placeholder}
-          InputProps={{
-            ...params.InputProps,
-          }}
-        />
-      ),
-    };
+        renderInput: (params) => (
+          <StyledTextField
+            {...params}
+            size="small"
+            label={label}
+            placeholder={placeholder}
+            InputProps={{
+              ...params.InputProps,
+            }}
+          />
+        ),
+      }),
+      [
+        field,
+        otherProps,
+        isMulti,
+        readOnly,
+        options,
+        setFieldValue,
+        name,
+        label,
+        placeholder,
+      ]
+    );
 
     return <StyledAutocomplete {...configAutocomplete} />;
   }

diff --git a/libs/hpc-ui/src/lib/components/form-fields/checkbox.tsx b/libs/hpc-ui/src/lib/components/form-fields/checkbox.tsx
@@ -5,7 +5,7 @@ import {
   CheckboxProps,
 } from '@mui/material';
 import { useField, useFormikContext } from 'formik';
-import React from 'react';
+import React, { useCallback } from 'react';
 
 const FormikCheckBox = ({
   name,
@@ -108,6 +108,7 @@ const CheckBox = ({
       />
     ),
   };
+
   return <FormControlLabel {...configCheckBox} />;
 };