From 323ef7ace51acdc117187118bc2a3a8b7ac59ed6 Mon Sep 17 00:00:00 2001
From: Ivan Gabriele <ivan.gabriele@gmail.com>
Date: Tue, 7 Feb 2023 03:47:38 +0100
Subject: [PATCH] feat(fields): set onChange value to undefined on disabled

---
 .talismanrc                                   |  3 +++
 src/fields/AutoComplete.tsx                   |  7 +++++--
 src/fields/Checkbox.tsx                       |  4 ++++
 src/fields/DatePicker/index.tsx               |  7 +++++--
 src/fields/DateRangePicker/TimeInput.tsx      |  4 ++--
 src/fields/DateRangePicker/index.tsx          |  7 +++++--
 src/fields/MultiCheckbox.tsx                  |  7 +++++++
 src/fields/MultiRadio.tsx                     |  7 +++++++
 src/fields/MultiSelect.tsx                    |  7 +++++--
 src/fields/NumberInput.tsx                    |  3 +++
 src/fields/Select.tsx                         |  7 +++++--
 src/fields/TextInput.tsx                      |  3 +++
 src/fields/Textarea.tsx                       |  3 +++
 src/formiks/FormikAutoComplete.tsx            | 17 +++++----------
 src/formiks/FormikCheckbox.tsx                | 19 ++++++-----------
 src/formiks/FormikDatePicker.tsx              | 15 ++++---------
 src/formiks/FormikDateRangePicker.tsx         | 15 ++++---------
 src/formiks/FormikMultiCheckbox.tsx           | 15 ++++---------
 src/formiks/FormikMultiRadio.tsx              | 15 ++++---------
 src/formiks/FormikMultiSelect.tsx             | 15 ++++---------
 src/formiks/FormikNumberInput.tsx             | 15 ++++---------
 src/formiks/FormikSelect.tsx                  | 15 ++++---------
 src/formiks/FormikTextInput.tsx               | 15 ++++---------
 src/formiks/FormikTextarea.tsx                | 15 ++++---------
 ...ickOutside.ts => useClickOutsideEffect.ts} |  2 +-
 src/hooks/useFieldUndefineEffect.ts           | 21 +++++++++++++++++++
 src/index.ts                                  |  4 ++--
 src/types.ts                                  | 11 ++++++++++
 stories/fields/Checkbox.stories.tsx           |  1 +
 stories/fields/MultiCheckbox.stories.tsx      |  1 +
 stories/fields/MultiRadio.stories.tsx         |  1 +
 stories/fields/MultiSelect.stories.tsx        |  1 +
 stories/fields/NumberInput.stories.tsx        |  1 +
 stories/fields/Select.stories.tsx             |  1 +
 stories/formiks/FormikCheckbox.stories.tsx    |  1 +
 stories/formiks/FormikDatePicker.stories.tsx  |  1 +
 .../formiks/FormikDateRangePicker.stories.tsx |  1 +
 .../formiks/FormikMultiCheckbox.stories.tsx   |  1 +
 stories/formiks/FormikMultiRadio.stories.tsx  |  1 +
 stories/formiks/FormikMultiSelect.stories.tsx |  1 +
 stories/formiks/FormikNumberInput.stories.tsx |  1 +
 stories/formiks/FormikSelect.stories.tsx      |  1 +
 stories/formiks/FormikTextInput.stories.tsx   |  1 +
 stories/formiks/FormikTextarea.stories.tsx    |  1 +
 44 files changed, 155 insertions(+), 139 deletions(-)
 rename src/hooks/{useClickOutside.ts => useClickOutsideEffect.ts} (96%)
 create mode 100644 src/hooks/useFieldUndefineEffect.ts

diff --git a/.talismanrc b/.talismanrc
index 8dbab9407..27eb76ecb 100644
--- a/.talismanrc
+++ b/.talismanrc
@@ -1 +1,4 @@
 threshold: low
+fileignoreconfig:
+  - filename: src/types.ts
+    checksum: e5e0f0c13cb4fe6f167758f40a6ee506b833c0919a1ec8f3b703ec431159e959
diff --git a/src/fields/AutoComplete.tsx b/src/fields/AutoComplete.tsx
index 516d73e25..059e9293c 100644
--- a/src/fields/AutoComplete.tsx
+++ b/src/fields/AutoComplete.tsx
@@ -7,7 +7,8 @@ import styled from 'styled-components'
 import { Field } from '../elements/Field'
 import { FieldError } from '../elements/FieldError'
 import { Label } from '../elements/Label'
-import { useClickOutside } from '../hooks/useClickOutside'
+import { useClickOutsideEffect } from '../hooks/useClickOutsideEffect'
+import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect'
 import { useForceUpdate } from '../hooks/useForceUpdate'
 import { normalizeString } from '../utils/normalizeString'
 
@@ -127,7 +128,9 @@ export function AutoComplete({
     setDefaultControlledValue(defaultValue)
   }, [defaultValue])
 
-  useClickOutside(boxRef, close, baseContainer)
+  useFieldUndefineEffect(originalProps.disabled, onChange)
+
+  useClickOutsideEffect(boxRef, close, baseContainer)
 
   useEffect(() => {
     forceUpdate()
diff --git a/src/fields/Checkbox.tsx b/src/fields/Checkbox.tsx
index c3624958e..d939a0e40 100644
--- a/src/fields/Checkbox.tsx
+++ b/src/fields/Checkbox.tsx
@@ -2,6 +2,8 @@ import { useCallback, useMemo } from 'react'
 import { Checkbox as RsuiteCheckbox } from 'rsuite'
 import styled from 'styled-components'
 
+import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect'
+
 import type { CheckboxProps as RsuiteCheckboxProps } from 'rsuite'
 import type { ValueType } from 'rsuite/esm/Checkbox'
 import type { Promisable } from 'type-fest'
@@ -28,6 +30,8 @@ export function Checkbox({ label, onChange, ...originalProps }: CheckboxProps) {
     [onChange]
   )
 
+  useFieldUndefineEffect(originalProps.disabled, onChange)
+
   return (
     <StyledCheckbox key={key} id={originalProps.name} onChange={handleChange} {...originalProps}>
       {label}
diff --git a/src/fields/DatePicker/index.tsx b/src/fields/DatePicker/index.tsx
index 2b4ea1e19..ec5254ce5 100644
--- a/src/fields/DatePicker/index.tsx
+++ b/src/fields/DatePicker/index.tsx
@@ -5,7 +5,8 @@ import styled from 'styled-components'
 
 import { Fieldset } from '../../elements/Fieldset'
 import { Legend } from '../../elements/Legend'
-import { useClickOutside } from '../../hooks/useClickOutside'
+import { useClickOutsideEffect } from '../../hooks/useClickOutsideEffect'
+import { useFieldUndefineEffect } from '../../hooks/useFieldUndefineEffect'
 import { useForceUpdate } from '../../hooks/useForceUpdate'
 import { getLocalizedDayjs } from '../../utils/getLocalizedDayjs'
 import { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'
@@ -214,7 +215,9 @@ export function DatePicker({
     forceUpdate()
   }, [forceUpdate])
 
-  useClickOutside(boxRef, closeCalendarPicker, baseContainer)
+  useFieldUndefineEffect(disabled, onChange)
+
+  useClickOutsideEffect(boxRef, closeCalendarPicker, baseContainer)
 
   return (
     <Fieldset disabled={disabled} {...nativeProps}>
diff --git a/src/fields/DateRangePicker/TimeInput.tsx b/src/fields/DateRangePicker/TimeInput.tsx
index a5fb00aab..68935e114 100644
--- a/src/fields/DateRangePicker/TimeInput.tsx
+++ b/src/fields/DateRangePicker/TimeInput.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
 import styled from 'styled-components'
 
-import { useClickOutside } from '../../hooks/useClickOutside'
+import { useClickOutsideEffect } from '../../hooks/useClickOutsideEffect'
 import { useForceUpdate } from '../../hooks/useForceUpdate'
 import { Clock } from '../../icons'
 import { NumberInput } from './NumberInput'
@@ -150,7 +150,7 @@ function TimeInputWithRef(
     onChange(nextTimeTuple)
   }, [closeRangedTimePicker, onChange])
 
-  useClickOutside(boxRef, closeRangedTimePicker, baseContainer)
+  useClickOutsideEffect(boxRef, closeRangedTimePicker, baseContainer)
 
   return (
     <Box
diff --git a/src/fields/DateRangePicker/index.tsx b/src/fields/DateRangePicker/index.tsx
index 48f39a0a5..5551e0792 100644
--- a/src/fields/DateRangePicker/index.tsx
+++ b/src/fields/DateRangePicker/index.tsx
@@ -5,7 +5,8 @@ import styled, { css } from 'styled-components'
 
 import { Fieldset } from '../../elements/Fieldset'
 import { Legend } from '../../elements/Legend'
-import { useClickOutside } from '../../hooks/useClickOutside'
+import { useClickOutsideEffect } from '../../hooks/useClickOutsideEffect'
+import { useFieldUndefineEffect } from '../../hooks/useFieldUndefineEffect'
 import { useForceUpdate } from '../../hooks/useForceUpdate'
 import { getLocalizedDayjs } from '../../utils/getLocalizedDayjs'
 import { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'
@@ -304,7 +305,9 @@ export function DateRangePicker({
     forceUpdate()
   }, [forceUpdate])
 
-  useClickOutside([endDateInputRef, startDateInputRef], closeRangeCalendarPicker, baseContainer)
+  useFieldUndefineEffect(disabled, onChange)
+
+  useClickOutsideEffect([endDateInputRef, startDateInputRef], closeRangeCalendarPicker, baseContainer)
 
   return (
     <Fieldset {...nativeProps}>
diff --git a/src/fields/MultiCheckbox.tsx b/src/fields/MultiCheckbox.tsx
index 7c4749844..9c2265a23 100644
--- a/src/fields/MultiCheckbox.tsx
+++ b/src/fields/MultiCheckbox.tsx
@@ -3,6 +3,7 @@ import { useCallback, useMemo, useRef } from 'react'
 import styled, { css } from 'styled-components'
 
 import { Fieldset } from '../elements/Fieldset'
+import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect'
 import { Checkbox } from './Checkbox'
 
 import type { Option } from '../types'
@@ -10,6 +11,7 @@ import type { Promisable } from 'type-fest'
 
 export type MultiCheckboxProps = {
   defaultValue?: string[] | undefined
+  disabled?: boolean | undefined
   isInline?: boolean | undefined
   isLabelHidden?: boolean | undefined
   isLight?: boolean | undefined
@@ -20,6 +22,8 @@ export type MultiCheckboxProps = {
 }
 export function MultiCheckbox({
   defaultValue = [],
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  disabled = false,
   isInline = false,
   isLabelHidden = false,
   isLight = false,
@@ -49,6 +53,8 @@ export function MultiCheckbox({
     [onChange]
   )
 
+  useFieldUndefineEffect(disabled, onChange)
+
   return (
     <Fieldset key={key} isHidden={isLabelHidden} isLight={isLight} legend={label}>
       <ChecboxesBox $isInline={isInline}>
@@ -57,6 +63,7 @@ export function MultiCheckbox({
             // eslint-disable-next-line react/no-array-index-key
             key={`${name}-${index}`}
             defaultChecked={defaultValue.includes(option.value)}
+            disabled={disabled}
             label={option.label}
             name={`${name}${index}`}
             onChange={(isChecked: boolean) => handleChange(option.value, isChecked)}
diff --git a/src/fields/MultiRadio.tsx b/src/fields/MultiRadio.tsx
index fe4c0ac32..561a10f47 100644
--- a/src/fields/MultiRadio.tsx
+++ b/src/fields/MultiRadio.tsx
@@ -3,12 +3,14 @@ import { Radio } from 'rsuite'
 import styled, { css } from 'styled-components'
 
 import { Fieldset } from '../elements/Fieldset'
+import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect'
 
 import type { Option } from '../types'
 import type { Promisable } from 'type-fest'
 
 export type MultiRadioProps = {
   defaultValue?: string | undefined
+  disabled?: boolean | undefined
   isInline?: boolean | undefined
   isLabelHidden?: boolean | undefined
   isLight?: boolean | undefined
@@ -19,6 +21,8 @@ export type MultiRadioProps = {
 }
 export function MultiRadio({
   defaultValue,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  disabled = false,
   isInline = false,
   isLabelHidden = false,
   isLight = false,
@@ -44,6 +48,8 @@ export function MultiRadio({
     [onChange]
   )
 
+  useFieldUndefineEffect(disabled, onChange)
+
   // TODO There may be a better solution.
   // A key change is not enough to force radio checked check changes
   // on `defaultValue` property update (even when appending `defaultValue` to `key`),
@@ -60,6 +66,7 @@ export function MultiRadio({
             // eslint-disable-next-line react/no-array-index-key
             key={`${name}-${index}`}
             defaultChecked={option.value === checkedOptionValue}
+            disabled={disabled}
             name={name}
             onChange={(_: any, isChecked: boolean) => handleChange(option.value, isChecked)}
           >
diff --git a/src/fields/MultiSelect.tsx b/src/fields/MultiSelect.tsx
index af3f61d31..389f067d6 100644
--- a/src/fields/MultiSelect.tsx
+++ b/src/fields/MultiSelect.tsx
@@ -5,7 +5,8 @@ import styled from 'styled-components'
 import { Field } from '../elements/Field'
 import { FieldError } from '../elements/FieldError'
 import { Label } from '../elements/Label'
-import { useClickOutside } from '../hooks/useClickOutside'
+import { useClickOutsideEffect } from '../hooks/useClickOutsideEffect'
+import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect'
 import { useForceUpdate } from '../hooks/useForceUpdate'
 import { normalizeString } from '../utils/normalizeString'
 
@@ -96,7 +97,9 @@ export function MultiSelect({
     [isOpen]
   )
 
-  useClickOutside(boxRef, close, baseContainer)
+  useFieldUndefineEffect(originalProps.disabled, onChange)
+
+  useClickOutsideEffect(boxRef, close, baseContainer)
 
   useEffect(() => {
     forceUpdate()
diff --git a/src/fields/NumberInput.tsx b/src/fields/NumberInput.tsx
index 8dc3453c6..021284271 100644
--- a/src/fields/NumberInput.tsx
+++ b/src/fields/NumberInput.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 import { Field } from '../elements/Field'
 import { Label } from '../elements/Label'
+import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect'
 
 import type { InputProps } from 'rsuite'
 import type { Promisable } from 'type-fest'
@@ -43,6 +44,8 @@ export function NumberInput({
     [onChange]
   )
 
+  useFieldUndefineEffect(originalProps.disabled, onChange)
+
   return (
     <Field>
       <Label htmlFor={originalProps.name} isHidden={isLabelHidden}>
diff --git a/src/fields/Select.tsx b/src/fields/Select.tsx
index 81d071586..1c886c032 100644
--- a/src/fields/Select.tsx
+++ b/src/fields/Select.tsx
@@ -5,7 +5,8 @@ import styled from 'styled-components'
 import { Field } from '../elements/Field'
 import { FieldError } from '../elements/FieldError'
 import { Label } from '../elements/Label'
-import { useClickOutside } from '../hooks/useClickOutside'
+import { useClickOutsideEffect } from '../hooks/useClickOutsideEffect'
+import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect'
 import { useForceUpdate } from '../hooks/useForceUpdate'
 import { normalizeString } from '../utils/normalizeString'
 
@@ -94,7 +95,9 @@ export function Select({
     [isOpen]
   )
 
-  useClickOutside(boxRef, close, baseContainer)
+  useFieldUndefineEffect(originalProps.disabled, onChange)
+
+  useClickOutsideEffect(boxRef, close, baseContainer)
 
   useEffect(() => {
     forceUpdate()
diff --git a/src/fields/TextInput.tsx b/src/fields/TextInput.tsx
index f73f1b0bc..851e1d38c 100644
--- a/src/fields/TextInput.tsx
+++ b/src/fields/TextInput.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 import { Field } from '../elements/Field'
 import { Label } from '../elements/Label'
+import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect'
 
 import type { InputProps } from 'rsuite'
 import type { Promisable } from 'type-fest'
@@ -41,6 +42,8 @@ export function TextInput({
     [onChange]
   )
 
+  useFieldUndefineEffect(originalProps.disabled, onChange)
+
   return (
     <Field>
       <Label htmlFor={originalProps.name} isHidden={isLabelHidden}>
diff --git a/src/fields/Textarea.tsx b/src/fields/Textarea.tsx
index 05c002b2b..022ad8bee 100644
--- a/src/fields/Textarea.tsx
+++ b/src/fields/Textarea.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 import { Field } from '../elements/Field'
 import { Label } from '../elements/Label'
+import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect'
 
 import type { MutableRefObject, TextareaHTMLAttributes } from 'react'
 import type { Promisable } from 'type-fest'
@@ -45,6 +46,8 @@ export function Textarea({
     onChange(normalizedNextValue)
   }, [onChange])
 
+  useFieldUndefineEffect(originalProps.disabled, onChange)
+
   return (
     <Field>
       <Label htmlFor={originalProps.name} isHidden={isLabelHidden}>
diff --git a/src/formiks/FormikAutoComplete.tsx b/src/formiks/FormikAutoComplete.tsx
index 94e93326a..3cf77158b 100644
--- a/src/formiks/FormikAutoComplete.tsx
+++ b/src/formiks/FormikAutoComplete.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { AutoComplete } from '../fields/AutoComplete'
 
@@ -9,21 +9,14 @@ export type FormikAutoCompleteProps = Omit<AutoCompleteProps, 'defaultValue' | '
 export function FormikAutoComplete({ name, ...originalProps }: FormikAutoCompleteProps) {
   const [field, , helpers] = useField<string | undefined>(name)
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const defaultValue = useMemo(() => field.value, [])
-
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
 
   if (!defaultValue) {
     return <AutoComplete name={name} onChange={helpers.setValue} {...originalProps} />
   }
 
-  return <AutoComplete defaultValue={defaultValue} name={name} onChange={helpers.setValue} {...originalProps} />
+  return <AutoComplete defaultValue={defaultValue} name={name} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/formiks/FormikCheckbox.tsx b/src/formiks/FormikCheckbox.tsx
index 1167b9109..554b26727 100644
--- a/src/formiks/FormikCheckbox.tsx
+++ b/src/formiks/FormikCheckbox.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { Checkbox } from '../fields/Checkbox'
 
@@ -9,17 +9,10 @@ export type FormikCheckboxProps = Omit<CheckboxProps, 'checked' | 'defaultChecke
 export function FormikCheckbox({ name, ...originalProps }: FormikCheckboxProps) {
   const [field, , helpers] = useField(name)
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
-  const defaultChecked = useMemo(() => Boolean(field.value), [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isDefaultChecked = useMemo(() => Boolean(field.value), [])
 
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
-
-  return <Checkbox defaultChecked={defaultChecked} name={name} onChange={helpers.setValue} {...originalProps} />
+  return <Checkbox defaultChecked={isDefaultChecked} name={name} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/formiks/FormikDatePicker.tsx b/src/formiks/FormikDatePicker.tsx
index 0d9e01229..d46a44900 100644
--- a/src/formiks/FormikDatePicker.tsx
+++ b/src/formiks/FormikDatePicker.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { DatePicker } from '../fields/DatePicker'
 
@@ -24,15 +24,8 @@ export function FormikDatePicker({ name, ...originalProps }: FormikDatePickerPro
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const defaultValue = useMemo(() => field.value, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
 
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
-
-  return <UntypedDatePicker defaultValue={defaultValue} onChange={helpers.setValue} {...originalProps} />
+  return <UntypedDatePicker defaultValue={defaultValue} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/formiks/FormikDateRangePicker.tsx b/src/formiks/FormikDateRangePicker.tsx
index dcaa4108a..0c66718a9 100644
--- a/src/formiks/FormikDateRangePicker.tsx
+++ b/src/formiks/FormikDateRangePicker.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { DateRangePicker } from '../fields/DateRangePicker'
 
@@ -28,15 +28,8 @@ export function FormikDateRangePicker({ name, ...originalProps }: FormikDateRang
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const defaultValue = useMemo(() => field.value, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
 
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
-
-  return <UntypedDateRangePicker defaultValue={defaultValue} onChange={helpers.setValue} {...originalProps} />
+  return <UntypedDateRangePicker defaultValue={defaultValue} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/formiks/FormikMultiCheckbox.tsx b/src/formiks/FormikMultiCheckbox.tsx
index 6a328fa27..e22c0b42b 100644
--- a/src/formiks/FormikMultiCheckbox.tsx
+++ b/src/formiks/FormikMultiCheckbox.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { MultiCheckbox } from '../fields/MultiCheckbox'
 
@@ -11,15 +11,8 @@ export function FormikMultiCheckbox({ name, ...originalProps }: FormikMultiCheck
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const defaultValue = useMemo(() => field.value, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
 
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
-
-  return <MultiCheckbox defaultValue={defaultValue} name={name} onChange={helpers.setValue} {...originalProps} />
+  return <MultiCheckbox defaultValue={defaultValue} name={name} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/formiks/FormikMultiRadio.tsx b/src/formiks/FormikMultiRadio.tsx
index 87d64a704..eeae10b4b 100644
--- a/src/formiks/FormikMultiRadio.tsx
+++ b/src/formiks/FormikMultiRadio.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { MultiRadio } from '../fields/MultiRadio'
 
@@ -11,15 +11,8 @@ export function FormikMultiRadio({ name, ...originalProps }: FormikMultiRadioPro
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const defaultValue = useMemo(() => field.value, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
 
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
-
-  return <MultiRadio defaultValue={defaultValue} name={name} onChange={helpers.setValue} {...originalProps} />
+  return <MultiRadio defaultValue={defaultValue} name={name} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/formiks/FormikMultiSelect.tsx b/src/formiks/FormikMultiSelect.tsx
index f3c6aded3..107c79c6e 100644
--- a/src/formiks/FormikMultiSelect.tsx
+++ b/src/formiks/FormikMultiSelect.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { MultiSelect } from '../fields/MultiSelect'
 
@@ -11,15 +11,8 @@ export function FormikMultiSelect({ name, ...originalProps }: FormikMultiSelectP
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const defaultValue = useMemo(() => field.value, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
 
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
-
-  return <MultiSelect defaultValue={defaultValue} name={name} onChange={helpers.setValue} {...originalProps} />
+  return <MultiSelect defaultValue={defaultValue} name={name} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/formiks/FormikNumberInput.tsx b/src/formiks/FormikNumberInput.tsx
index 3107bb6bd..c16421c59 100644
--- a/src/formiks/FormikNumberInput.tsx
+++ b/src/formiks/FormikNumberInput.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { NumberInput } from '../fields/NumberInput'
 
@@ -11,15 +11,8 @@ export function FormikNumberInput({ name, ...originalProps }: FormikNumberInputP
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const defaultValue = useMemo(() => field.value, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
 
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
-
-  return <NumberInput defaultValue={defaultValue} name={name} onChange={helpers.setValue} {...originalProps} />
+  return <NumberInput defaultValue={defaultValue} name={name} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/formiks/FormikSelect.tsx b/src/formiks/FormikSelect.tsx
index 5d388ec7d..93a53aa1c 100644
--- a/src/formiks/FormikSelect.tsx
+++ b/src/formiks/FormikSelect.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { Select } from '../fields/Select'
 
@@ -12,15 +12,8 @@ export function FormikSelect({ name, ...originalProps }: FormikSelectProps) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const defaultValue = useMemo(() => field.value, [])
   const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
 
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
-
-  return <Select defaultValue={defaultValue} error={error} name={name} onChange={helpers.setValue} {...originalProps} />
+  return <Select defaultValue={defaultValue} error={error} name={name} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/formiks/FormikTextInput.tsx b/src/formiks/FormikTextInput.tsx
index 33b253822..e4e09c2ef 100644
--- a/src/formiks/FormikTextInput.tsx
+++ b/src/formiks/FormikTextInput.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { TextInput } from '../fields/TextInput'
 
@@ -11,15 +11,8 @@ export function FormikTextInput({ name, ...originalProps }: FormikTextInputProps
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const defaultValue = useMemo(() => field.value, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
 
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
-
-  return <TextInput defaultValue={defaultValue} name={name} onChange={helpers.setValue} {...originalProps} />
+  return <TextInput defaultValue={defaultValue} name={name} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/formiks/FormikTextarea.tsx b/src/formiks/FormikTextarea.tsx
index f54701b72..8922ed1f2 100644
--- a/src/formiks/FormikTextarea.tsx
+++ b/src/formiks/FormikTextarea.tsx
@@ -1,5 +1,5 @@
 import { useField } from 'formik'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { Textarea } from '../fields/Textarea'
 
@@ -11,15 +11,8 @@ export function FormikTextarea({ name, ...originalProps }: FormikTextareaProps)
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const defaultValue = useMemo(() => field.value, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleChange = useMemo(() => helpers.setValue, [])
 
-  useEffect(
-    () => () => {
-      helpers.setValue(undefined)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
-
-  return <Textarea defaultValue={defaultValue} name={name} onChange={helpers.setValue} {...originalProps} />
+  return <Textarea defaultValue={defaultValue} name={name} onChange={handleChange} {...originalProps} />
 }
diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutsideEffect.ts
similarity index 96%
rename from src/hooks/useClickOutside.ts
rename to src/hooks/useClickOutsideEffect.ts
index 695490c86..4d7039b48 100644
--- a/src/hooks/useClickOutside.ts
+++ b/src/hooks/useClickOutsideEffect.ts
@@ -4,7 +4,7 @@ import { useCallback, useEffect } from 'react'
 import type { MutableRefObject } from 'react'
 import type { Promisable } from 'type-fest'
 
-export const useClickOutside = (
+export const useClickOutsideEffect = (
   zoneRefOrzoneRefs: MutableRefObject<any> | MutableRefObject<any>[],
   action: () => Promisable<void>,
   baseContainer?: Document | HTMLDivElement | null
diff --git a/src/hooks/useFieldUndefineEffect.ts b/src/hooks/useFieldUndefineEffect.ts
new file mode 100644
index 000000000..b65175be9
--- /dev/null
+++ b/src/hooks/useFieldUndefineEffect.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+
+import type { Promisable } from 'type-fest'
+
+export function useFieldUndefineEffect(
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  disabled: boolean | undefined,
+  onChange: ((nextValue: any) => Promisable<void>) | undefined
+) {
+  useEffect(() => {
+    if (disabled && onChange) {
+      onChange(undefined)
+    }
+
+    return () => {
+      if (onChange) {
+        onChange(undefined)
+      }
+    }
+  }, [disabled, onChange])
+}
diff --git a/src/index.ts b/src/index.ts
index 3c1328452..c6a16908b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -51,7 +51,7 @@ export * as Icon from './icons'
   Hooks
 */
 
-export { useClickOutside } from './hooks/useClickOutside'
+export { useClickOutsideEffect } from './hooks/useClickOutsideEffect'
 export { useForceUpdate } from './hooks/useForceUpdate'
 
 /* -----------------------------------------------------------------------------
@@ -69,7 +69,7 @@ export { stopMouseEventPropagation } from './utils/stopMouseEventPropagation'
 */
 
 export type { PartialTheme, Theme } from './theme'
-export type { DateAsStringRange, DateRange, IconProps, Option } from './types'
+export type { DateAsStringRange, DateRange, IconProps, Option, Undefine } from './types'
 
 export type { DropdownProps, DropdownItemProps } from './components/Dropdown'
 
diff --git a/src/types.ts b/src/types.ts
index 1b1dc545a..9a04a5ce4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -13,3 +13,14 @@ export type Option<V = string> = {
   label: string
   value: V
 }
+
+/**
+ * Mark all the props type of an interface/type as `| undefined`
+ *
+ * @description
+ * When `exactOptionalPropertyTypes` is enabled in tsconfig.json,
+ * this is useful to create "partial" objects while keeping their props mandatory.
+ */
+export type Undefine<T> = {
+  [K in keyof T]: T[K] | undefined
+}
diff --git a/stories/fields/Checkbox.stories.tsx b/stories/fields/Checkbox.stories.tsx
index f83d1b747..ae0cf7295 100644
--- a/stories/fields/Checkbox.stories.tsx
+++ b/stories/fields/Checkbox.stories.tsx
@@ -8,6 +8,7 @@ import type { CheckboxProps } from '../../src'
 
 const args: CheckboxProps = {
   defaultChecked: false,
+  disabled: false,
   label: 'Check me',
   name: 'myCheckbox'
 }
diff --git a/stories/fields/MultiCheckbox.stories.tsx b/stories/fields/MultiCheckbox.stories.tsx
index e86ce5d9d..e03f2468f 100644
--- a/stories/fields/MultiCheckbox.stories.tsx
+++ b/stories/fields/MultiCheckbox.stories.tsx
@@ -8,6 +8,7 @@ import type { MultiCheckboxProps } from '../../src'
 
 const args: MultiCheckboxProps = {
   defaultValue: undefined,
+  disabled: false,
   isInline: false,
   isLabelHidden: false,
   isLight: false,
diff --git a/stories/fields/MultiRadio.stories.tsx b/stories/fields/MultiRadio.stories.tsx
index 43ea45f5a..3761a9a42 100644
--- a/stories/fields/MultiRadio.stories.tsx
+++ b/stories/fields/MultiRadio.stories.tsx
@@ -8,6 +8,7 @@ import type { MultiRadioProps } from '../../src'
 
 const args: MultiRadioProps = {
   defaultValue: undefined,
+  disabled: false,
   isInline: false,
   isLabelHidden: false,
   isLight: false,
diff --git a/stories/fields/MultiSelect.stories.tsx b/stories/fields/MultiSelect.stories.tsx
index 5282ce82b..4c30e9f61 100644
--- a/stories/fields/MultiSelect.stories.tsx
+++ b/stories/fields/MultiSelect.stories.tsx
@@ -14,6 +14,7 @@ import type { MultiSelectProps } from '../../src'
 const args: MultiSelectProps = {
   error: '',
   defaultValue: undefined,
+  disabled: false,
   fixedWidth: 170,
   isLabelHidden: false,
   isLight: false,
diff --git a/stories/fields/NumberInput.stories.tsx b/stories/fields/NumberInput.stories.tsx
index 6f1196d89..2ef1e9888 100644
--- a/stories/fields/NumberInput.stories.tsx
+++ b/stories/fields/NumberInput.stories.tsx
@@ -8,6 +8,7 @@ import type { NumberInputProps } from '../../src'
 
 const args: NumberInputProps = {
   defaultValue: undefined,
+  disabled: false,
   isLabelHidden: false,
   isLight: false,
   name: 'myNumberInput',
diff --git a/stories/fields/Select.stories.tsx b/stories/fields/Select.stories.tsx
index 737972df0..255a3cfec 100644
--- a/stories/fields/Select.stories.tsx
+++ b/stories/fields/Select.stories.tsx
@@ -13,6 +13,7 @@ import type { SelectProps } from '../../src'
 
 const args: SelectProps = {
   defaultValue: undefined,
+  disabled: false,
   error: '',
   isLabelHidden: false,
   isLight: false,
diff --git a/stories/formiks/FormikCheckbox.stories.tsx b/stories/formiks/FormikCheckbox.stories.tsx
index 9c261b92b..d5f1391a8 100644
--- a/stories/formiks/FormikCheckbox.stories.tsx
+++ b/stories/formiks/FormikCheckbox.stories.tsx
@@ -9,6 +9,7 @@ import { noop } from '../../src/utils/noop'
 import type { FormikCheckboxProps } from '../../src'
 
 const args: FormikCheckboxProps = {
+  disabled: false,
   label: 'Check me',
   name: 'myCheckbox'
 }
diff --git a/stories/formiks/FormikDatePicker.stories.tsx b/stories/formiks/FormikDatePicker.stories.tsx
index b07f4a3cd..5da0107b5 100644
--- a/stories/formiks/FormikDatePicker.stories.tsx
+++ b/stories/formiks/FormikDatePicker.stories.tsx
@@ -10,6 +10,7 @@ import type { FormikDatePickerWithDateDateProps, FormikDatePickerWithStringDateP
 
 const args: FormikDatePickerWithDateDateProps | FormikDatePickerWithStringDateProps = {
   baseContainer: undefined,
+  disabled: false,
   isHistorical: false,
   isLabelHidden: false,
   isLight: false,
diff --git a/stories/formiks/FormikDateRangePicker.stories.tsx b/stories/formiks/FormikDateRangePicker.stories.tsx
index 8fac2bbff..a1aa9a4ad 100644
--- a/stories/formiks/FormikDateRangePicker.stories.tsx
+++ b/stories/formiks/FormikDateRangePicker.stories.tsx
@@ -11,6 +11,7 @@ import type { DateRange } from '../../src/types'
 
 const args: FormikDateRangePickerWithDateDateProps | FormikDateRangePickerWithStringDateProps = {
   baseContainer: undefined,
+  disabled: false,
   isHistorical: false,
   isLabelHidden: false,
   isLight: false,
diff --git a/stories/formiks/FormikMultiCheckbox.stories.tsx b/stories/formiks/FormikMultiCheckbox.stories.tsx
index 5e810a4f6..837789be8 100644
--- a/stories/formiks/FormikMultiCheckbox.stories.tsx
+++ b/stories/formiks/FormikMultiCheckbox.stories.tsx
@@ -9,6 +9,7 @@ import { noop } from '../../src/utils/noop'
 import type { FormikMultiCheckboxProps } from '../../src'
 
 const args: FormikMultiCheckboxProps = {
+  disabled: false,
   isInline: false,
   isLabelHidden: false,
   isLight: false,
diff --git a/stories/formiks/FormikMultiRadio.stories.tsx b/stories/formiks/FormikMultiRadio.stories.tsx
index cf77ac67e..aab48c588 100644
--- a/stories/formiks/FormikMultiRadio.stories.tsx
+++ b/stories/formiks/FormikMultiRadio.stories.tsx
@@ -9,6 +9,7 @@ import { noop } from '../../src/utils/noop'
 import type { FormikMultiRadioProps } from '../../src'
 
 const args: FormikMultiRadioProps = {
+  disabled: false,
   isInline: false,
   isLabelHidden: false,
   isLight: false,
diff --git a/stories/formiks/FormikMultiSelect.stories.tsx b/stories/formiks/FormikMultiSelect.stories.tsx
index 4a4e85f08..01c9f187e 100644
--- a/stories/formiks/FormikMultiSelect.stories.tsx
+++ b/stories/formiks/FormikMultiSelect.stories.tsx
@@ -9,6 +9,7 @@ import { noop } from '../../src/utils/noop'
 import type { FormikMultiSelectProps } from '../../src'
 
 const args: FormikMultiSelectProps = {
+  disabled: false,
   fixedWidth: 160,
   isLabelHidden: false,
   isLight: false,
diff --git a/stories/formiks/FormikNumberInput.stories.tsx b/stories/formiks/FormikNumberInput.stories.tsx
index 453cb0298..5c386067d 100644
--- a/stories/formiks/FormikNumberInput.stories.tsx
+++ b/stories/formiks/FormikNumberInput.stories.tsx
@@ -9,6 +9,7 @@ import { noop } from '../../src/utils/noop'
 import type { FormikNumberInputProps } from '../../src'
 
 const args: FormikNumberInputProps = {
+  disabled: false,
   isLabelHidden: false,
   isLight: false,
   name: 'myNumberInput',
diff --git a/stories/formiks/FormikSelect.stories.tsx b/stories/formiks/FormikSelect.stories.tsx
index 2fccc36cb..09f506cdf 100644
--- a/stories/formiks/FormikSelect.stories.tsx
+++ b/stories/formiks/FormikSelect.stories.tsx
@@ -9,6 +9,7 @@ import { noop } from '../../src/utils/noop'
 import type { FormikSelectProps } from '../../src'
 
 const args: FormikSelectProps = {
+  disabled: false,
   isLabelHidden: false,
   isLight: false,
   label: 'A select',
diff --git a/stories/formiks/FormikTextInput.stories.tsx b/stories/formiks/FormikTextInput.stories.tsx
index 771b8d435..f31449e16 100644
--- a/stories/formiks/FormikTextInput.stories.tsx
+++ b/stories/formiks/FormikTextInput.stories.tsx
@@ -9,6 +9,7 @@ import { noop } from '../../src/utils/noop'
 import type { FormikTextInputProps } from '../../src'
 
 const args: FormikTextInputProps = {
+  disabled: false,
   isLabelHidden: false,
   isLight: false,
   name: 'myTextInput',
diff --git a/stories/formiks/FormikTextarea.stories.tsx b/stories/formiks/FormikTextarea.stories.tsx
index 02b6e4d96..6c2279532 100644
--- a/stories/formiks/FormikTextarea.stories.tsx
+++ b/stories/formiks/FormikTextarea.stories.tsx
@@ -9,6 +9,7 @@ import { noop } from '../../src/utils/noop'
 import type { FormikTextareaProps } from '../../src'
 
 const args: FormikTextareaProps = {
+  disabled: false,
   isLabelHidden: false,
   isLight: false,
   name: 'myTextarea',