Fix/disable fields just a try

rollup.config.mjs

@@ -26,7 +26,7 @@ const plugins = [
   terser({
     output: { comments: false },
     compress: {
-      drop_console: true,
+      drop_console: false,
     },
   }),
 ];

src/lib/AsyncTypeaheadInput.tsx

@@ -83,6 +83,7 @@ const AsyncTypeaheadInput = <T extends FieldValues>(props: AsyncTypeaheadInputPr
   const { name, id } = useSafeNameId(props.name ?? "", props.id);
   const { setDebounceSearch, isLoading } = useDebounceHook(queryFn, setOptions);
   const { control, disabled: formDisabled, getFieldState, setValue: setFormValue } = useFormContext();
+  const isDisabled = useMemo(() => formDisabled || disabled, [formDisabled, disabled]);
 
   validateFixedOptions(fixedOptions, multiple, autocompleteProps, withFixedOptionsInValue, value);
 
@@ -91,14 +92,14 @@ const AsyncTypeaheadInput = <T extends FieldValues>(props: AsyncTypeaheadInputPr
   } = useController({
     name,
     control,
+    shouldUnregister: isDisabled,
     rules: {
       validate: {
         required: () => getFieldState(name)?.error?.message,
       },
     },
   });
 
-  const isDisabled = useMemo(() => formDisabled || disabled, [formDisabled, disabled]);
   const paginatedOptions = useMemo(
     () => (limitResults === undefined ? options : options.slice(0, page * limitResults)),
     [limitResults, page, options],

src/lib/DatePickerInput.tsx

@@ -129,6 +129,7 @@ const DatePickerInput = <T extends FieldValues>(props: DatePickerInputProps<T>)
   return (
     <Controller
       control={control}
+      shouldUnregister={isDisabled}
       name={name}
       render={({ field, fieldState: { error } }) => (
         <FormGroupLayout<T, DatePickerRenderAddonProps>

src/lib/FormattedInput.tsx

@@ -46,6 +46,7 @@ const FormattedInput = <T extends FieldValues>(props: FormattedInputProps<T>) =>
     <Controller
       control={control}
       name={name}
+      shouldUnregister={isDisabled}
       render={({ field: { name, onBlur, onChange, ref, value }, fieldState: { error } }) => {
         const commonProps: NumericFormatProps = {
           name: name,

src/lib/RatingInput.tsx

@@ -29,6 +29,7 @@ const RatingInput = <T extends FieldValues>(props: RatingInputProps<T>) => {
   return (
     <Controller
       control={control}
+      shouldUnregister={disabled || formDisabled}
       name={props.name}
       render={({ field: { value, onBlur, onChange, ...fieldRest } }) => (
         <FormGroupLayout

src/lib/StaticTypeaheadInput.tsx

@@ -72,19 +72,21 @@ const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInput
 
   const { name, id } = useSafeNameId(props.name ?? "", props.id);
   const { control, disabled: formDisabled, getFieldState, clearErrors, watch } = useFormContext();
+  const isDisabled = useMemo(() => formDisabled || disabled, [formDisabled, disabled]);
+
   const {
     field: { ref, ...field },
   } = useController({
     name,
     control,
+    shouldUnregister: isDisabled,
     rules: {
       validate: {
         required: () => getFieldState(name)?.error?.message,
       },
     },
   });
 
-  const isDisabled = useMemo(() => formDisabled || disabled, [formDisabled, disabled]);
   const paginatedOptions = useMemo(
     () => (limitResults === undefined ? options : options.slice(0, page * limitResults)),
     [limitResults, page, options],

src/lib/components/ColorPicker/ColorPicker.tsx

@@ -56,6 +56,7 @@ const ColorPicker = <T extends FieldValues>(props: ColorPickerInputProps<T>) =>
   } = useController({
     name,
     control,
+    shouldUnregister: true,
     rules: {
       validate: {
         required: () => getFieldState(name)?.error?.message,

src/lib/components/Input/InputInternal.tsx

@@ -43,6 +43,7 @@ const InputInternal = <T extends FieldValues>(props: InputProps<T>) => {
   } = useFormContext();
 
   const { ref, ...rest } = register(name, {
+    // disabled: formDisabled || disabled, // FIXME this one unregister on submit
     setValueAs: (value: string) => (value === UNDEFINED_OPTION_VALUE ? undefined : value),
   });
 
@@ -69,7 +70,7 @@ const InputInternal = <T extends FieldValues>(props: InputProps<T>) => {
         maxLength={maxLength}
         rows={textAreaRows}
         multiple={multiple}
-        disabled={formDisabled || disabled}
+        disabled={formDisabled || disabled} // this one just disables the input
         plaintext={plainText}
         style={plainText ? { color: "black", marginLeft: 10, ...style } : { ...style }}
         placeholder={placeholder}
@@ -88,12 +89,23 @@ const InputInternal = <T extends FieldValues>(props: InputProps<T>) => {
           })();
         }}
         onChange={(e) => {
+          console.log("event before the IIFE-->", e);
+
           void (async () => {
+            // if (onChange) {
+            //   onChange(e);
+            // }
+
+            // setTimeout(async () => {
+            //   console.log("event after the IIFE-->", e);
+            // }, 1000);
+
+            await rest.onChange(e);
+
             if (onChange) {
+              console.log("calling custom onChange", e);
               onChange(e);
             }
-
-            await rest.onChange(e);
           })();
         }}
         onKeyDown={onKeyDown}