feat(fields): set onChange value to undefined on disabled

.talismanrc

@@ -1 +1,4 @@
 threshold: low
+fileignoreconfig:
+  - filename: src/types.ts
+    checksum: e5e0f0c13cb4fe6f167758f40a6ee506b833c0919a1ec8f3b703ec431159e959

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()

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}

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}>

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

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}>

src/fields/MultiCheckbox.tsx

@@ -3,13 +3,15 @@ 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'
 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)}

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)}
           >

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()

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}>

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()

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}>

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}>

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} />
 }

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} />
 }

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} />
 }

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} />
 }