fix(controllers): fix disabled prop disabling controller and not on…

…ly the field add a new prop `controllerDisabled`
RekStack · Jul 7, 2024 · 3243729 · 3243729
1 parent ccd0d7c
commit 3243729
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 98 deletions.
diff --git a/src/components/DatePickerController.tsx b/src/components/DatePickerController.tsx
@@ -13,7 +13,7 @@ export type DatePickerControllerProps<
 > = FieldControllerProps<FV> &
   Omit<
     DatePickerProps<PVD, PickerEnableAccessibleFieldDOMStructure>,
-    'label' | 'name' | 'disabled' | 'onChange' | 'value' | 'onBlur'
+    'label' | 'name' | 'onChange' | 'value' | 'onBlur'
   >;
 
 export const DatePickerController = <
@@ -22,12 +22,12 @@ export const DatePickerController = <
   PickerEnableAccessibleFieldDOMStructure extends boolean = false,
 >({
   control,
+  controllerDisabled = false,
   label,
   name,
   optional = false,
   requiredLabel,
   onErrorMessage,
-  disabled = false,
   ...datePickerProps
 }: DatePickerControllerProps<FV, PVD, PickerEnableAccessibleFieldDOMStructure>) => {
   const { fieldControllerLabel } = useFieldControllerLabels({ label, optional, requiredLabel });
@@ -38,13 +38,12 @@ export const DatePickerController = <
     fieldState: { invalid, error },
   } = useController({
     control,
-    disabled,
+    disabled: controllerDisabled,
     name,
   });
 
   return (
     <DatePicker
-      {...datePickerProps}
       {...restField}
       aria-required={optional ? 'false' : 'true'}
       label={fieldControllerLabel}
@@ -57,6 +56,7 @@ export const DatePickerController = <
         },
       }}
       value={stringToDate(value)}
+      {...datePickerProps}
     />
   );
 };
diff --git a/src/components/PhoneInputController.tsx b/src/components/PhoneInputController.tsx
@@ -10,19 +10,16 @@ import type { MuiTelInputProps } from 'mui-tel-input';
 export const matchIsValidTel = _matchIsValidTel;
 
 export type PhoneInputControllerProps<FV extends FieldValues> = FieldControllerProps<FV> &
-  DistributiveOmit<
-    MuiTelInputProps,
-    'onChange' | 'error' | 'helperText' | 'label' | 'name' | 'disabled' | 'value' | 'onBlur'
-  >;
+  DistributiveOmit<MuiTelInputProps, 'onChange' | 'error' | 'helperText' | 'label' | 'name' | 'value' | 'onBlur'>;
 
 export const PhoneInputController = <FV extends FieldValues>({
   control,
+  controllerDisabled = false,
   label,
   name,
   optional = false,
   requiredLabel,
   onErrorMessage,
-  disabled = false,
   ...muiTelInputProps
 }: PhoneInputControllerProps<FV>) => {
   const { fieldControllerLabel } = useFieldControllerLabels({ label, optional, requiredLabel });
@@ -33,7 +30,7 @@ export const PhoneInputController = <FV extends FieldValues>({
     fieldState: { invalid, error },
   } = useController({
     control,
-    disabled,
+    disabled: controllerDisabled,
     name,
   });
 

diff --git a/src/components/SelectController.tsx b/src/components/SelectController.tsx
@@ -9,12 +9,12 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import { Controller } from 'react-hook-form';
 import {
   useAsyncFieldControllerLabels,
   useFieldControllerLabels,
   useFieldControllerWithOptionsLabels,
 } from '../hooks/index';
+import { useController } from 'react-hook-form';
 import { useMemo } from 'react';
 import type {
   AsyncFieldControllerProps,
@@ -69,6 +69,7 @@ export interface SelectControllerProps<FV extends FieldValues, Value extends Obj
 
 export const SelectController = <FV extends FieldValues, Value extends ObjectLike>({
   control,
+  controllerDisabled = false,
   label,
   name,
   optional = false,
@@ -98,94 +99,97 @@ export const SelectController = <FV extends FieldValues, Value extends ObjectLik
 
   const shouldDisplayOptions = useMemo(() => !loading && !loadingError, [loadingError, loading]);
 
+  const {
+    field,
+    fieldState: { invalid, error },
+  } = useController({
+    control,
+    disabled: controllerDisabled,
+    name,
+  });
+
   return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field, fieldState: { invalid, error } }) => (
-        <FormControl
-          {...muiProps?.formControlProps}
-          error={invalid}
-          fullWidth
-        >
-          <InputLabel {...muiProps?.inputLabelProps}>{fieldControllerLabel}</InputLabel>
-          <Select
-            {...field}
-            aria-required={optional ? 'false' : 'true'}
-            label={fieldControllerLabel}
-            renderValue={(selected) => {
-              const found = options?.find((option) => optionValueAccessor(option) === selected);
+    <FormControl
+      {...muiProps?.formControlProps}
+      error={invalid}
+      fullWidth
+    >
+      <InputLabel {...muiProps?.inputLabelProps}>{fieldControllerLabel}</InputLabel>
+      <Select
+        {...field}
+        aria-required={optional ? 'false' : 'true'}
+        label={fieldControllerLabel}
+        renderValue={(selected) => {
+          const found = options?.find((option) => optionValueAccessor(option) === selected);
 
-              if (found) {
-                if (optionExtraLabelAccessor?.(found) && displayExtraLabelWhenValueSelected) {
-                  return `${optionLabelAccessor(found)}, ${optionExtraLabelAccessor(found)}`;
-                }
+          if (found) {
+            if (optionExtraLabelAccessor?.(found) && displayExtraLabelWhenValueSelected) {
+              return `${optionLabelAccessor(found)}, ${optionExtraLabelAccessor(found)}`;
+            }
 
-                return optionLabelAccessor(found);
-              }
+            return optionLabelAccessor(found);
+          }
 
-              return '';
-            }}
-            {...selectProps}
+          return '';
+        }}
+        {...selectProps}
+      >
+        {loading && (
+          <MenuItem
+            {...muiProps?.loadingMenuItemProps}
+            disabled
+          >
+            <Stack
+              alignItems='center'
+              flexDirection='row'
+              justifyContent='space-between'
+              width='100%'
+              {...muiProps?.loadingStackProps}
+            >
+              <Typography {...muiProps?.loadingTypographyProps}>{fieldControllerLoadingLabel}</Typography>
+              <CircularProgress
+                size={30}
+                {...muiProps?.loadingCircularProgressProps}
+              />
+            </Stack>
+          </MenuItem>
+        )}
+        {loadingError && (
+          <MenuItem
+            {...muiProps?.errorMenuItemProps}
+            disabled
+          >
+            <Typography {...muiProps?.errorTypographyProps}>{fieldControllerLoadingErrorLabel}</Typography>
+          </MenuItem>
+        )}
+        {shouldDisplayOptions && options?.length === 0 && (
+          <MenuItem
+            disabled
+            {...muiProps?.noOptionsMenuItemProps}
           >
-            {loading && (
-              <MenuItem
-                {...muiProps?.loadingMenuItemProps}
-                disabled
-              >
-                <Stack
-                  alignItems='center'
-                  flexDirection='row'
-                  justifyContent='space-between'
-                  width='100%'
-                  {...muiProps?.loadingStackProps}
-                >
-                  <Typography {...muiProps?.loadingTypographyProps}>{fieldControllerLoadingLabel}</Typography>
-                  <CircularProgress
-                    size={30}
-                    {...muiProps?.loadingCircularProgressProps}
-                  />
-                </Stack>
-              </MenuItem>
-            )}
-            {loadingError && (
-              <MenuItem
-                {...muiProps?.errorMenuItemProps}
-                disabled
-              >
-                <Typography {...muiProps?.errorTypographyProps}>{fieldControllerLoadingErrorLabel}</Typography>
-              </MenuItem>
-            )}
-            {shouldDisplayOptions && options?.length === 0 && (
-              <MenuItem
-                disabled
-                {...muiProps?.noOptionsMenuItemProps}
-              >
-                <Typography {...muiProps?.noOptionsTypographyProps}>{fieldControllerNoOptionsLabel}</Typography>
-              </MenuItem>
-            )}
-            {shouldDisplayOptions &&
-              options?.map((option) => (
-                <MenuItem
-                  {...muiProps?.menuItemProps}
-                  key={optionValueAccessor(option)}
-                  value={optionValueAccessor(option)}
-                >
-                  <ListItemText
-                    {...muiProps?.listItemTextProps}
-                    primary={optionLabelAccessor(option)}
-                    secondary={optionExtraLabelAccessor?.(option)}
-                  />
-                </MenuItem>
-              ))}
-          </Select>
-          {invalid && (
-            <FormHelperText {...muiProps?.formHelperTextProps}>
-              {onErrorMessage && error?.message ? onErrorMessage(error.message) : error?.message}
-            </FormHelperText>
-          )}
-        </FormControl>
+            <Typography {...muiProps?.noOptionsTypographyProps}>{fieldControllerNoOptionsLabel}</Typography>
+          </MenuItem>
+        )}
+        {shouldDisplayOptions &&
+          options?.map((option) => (
+            <MenuItem
+              {...muiProps?.menuItemProps}
+              key={optionValueAccessor(option)}
+              value={optionValueAccessor(option)}
+            >
+              <ListItemText
+                {...muiProps?.listItemTextProps}
+                primary={optionLabelAccessor(option)}
+                secondary={optionExtraLabelAccessor?.(option)}
+              />
+            </MenuItem>
+          ))}
+      </Select>
+      {invalid && (
+        <FormHelperText {...muiProps?.formHelperTextProps}>
+          {onErrorMessage && error?.message ? onErrorMessage(error.message) : error?.message}
+        </FormHelperText>
       )}
-    />
+    </FormControl>
   );
 };
diff --git a/src/components/TextFieldController.tsx b/src/components/TextFieldController.tsx
@@ -12,12 +12,12 @@ export type TextFieldControllerProps<FV extends FieldValues> = FieldControllerPr
 
 export const TextFieldController = <FV extends FieldValues>({
   control,
+  controllerDisabled = false,
   label,
   name,
   optional = false,
   requiredLabel,
   onErrorMessage,
-  disabled = false,
   maxLength,
   ...textFieldProps
 }: TextFieldControllerProps<FV>) => {
@@ -29,13 +29,12 @@ export const TextFieldController = <FV extends FieldValues>({
     fieldState: { invalid, error },
   } = useController({
     control,
-    disabled,
+    disabled: controllerDisabled,
     name,
   });
 
   return (
     <TextField
-      {...textFieldProps}
       {...restField}
       aria-required={optional ? 'false' : 'true'}
       error={invalid}
@@ -48,6 +47,7 @@ export const TextFieldController = <FV extends FieldValues>({
           onChange(e);
         }
       }}
+      {...textFieldProps}
     />
   );
 };
diff --git a/src/types/fields.ts b/src/types/fields.ts
@@ -6,7 +6,7 @@ export interface FieldControllerProps<FV extends FieldValues> {
   name: FieldPath<FV>;
   label: string;
   optional?: boolean;
-  disabled?: boolean;
+  controllerDisabled?: boolean;
   requiredLabel?: string;
   onErrorMessage?: (error: string) => string;
 }