diff --git a/packages/ui-components/src/lib/hooks/useFormContext.ts b/packages/ui-components/src/lib/hooks/useFormContext.ts index 4e119dc9..057fd883 100644 --- a/packages/ui-components/src/lib/hooks/useFormContext.ts +++ b/packages/ui-components/src/lib/hooks/useFormContext.ts @@ -1,7 +1,14 @@ import { useContext } from 'react'; import { FormikContext, FormikContextType } from 'formik'; -// Note: Using context this way instead of useFormikContext suppresses the error if it is not within Formik -// TODO: #106 Fix React 18 TypeScript errors @jaredhill4 -// @ts-ignore -export const useFormContext = () => useContext>(FormikContext); // Using context this way instead of useFormikContext suppresses the error if it is not within Formik +// This hook safely gets the Formik context if available, or returns null if not +export const useFormContext = () => { + try { + // Using context this way instead of useFormikContext suppresses the error if it is not within Formik + const context = useContext>(FormikContext); + return context; + } catch (error) { + // Return null if context is not available or there's an error + return null; + } +}; diff --git a/packages/ui-components/src/lib/inputs/InputRadio/InputRadio.tsx b/packages/ui-components/src/lib/inputs/InputRadio/InputRadio.tsx index 78f18708..af18b63b 100644 --- a/packages/ui-components/src/lib/inputs/InputRadio/InputRadio.tsx +++ b/packages/ui-components/src/lib/inputs/InputRadio/InputRadio.tsx @@ -19,7 +19,7 @@ export const InputRadio: FC = ({ }) => { return ( } + control={} className={classNames('lc-input lc-input-radio', className)} label={label} labelPlacement={labelPlacement} diff --git a/packages/ui-components/src/lib/inputs/InputRadio/InputRadioGroup.tsx b/packages/ui-components/src/lib/inputs/InputRadio/InputRadioGroup.tsx index ea2a4d4c..855ac8df 100644 --- a/packages/ui-components/src/lib/inputs/InputRadio/InputRadioGroup.tsx +++ b/packages/ui-components/src/lib/inputs/InputRadio/InputRadioGroup.tsx @@ -17,7 +17,7 @@ export const InputRadioGroup: FC = ({ className, formikPro const formContext = useFormContext(); if (!formikProps && formContext) formikProps = formContext; - const fieldProps = formikProps?.getFieldProps(props.name); + const fieldProps = formikProps?.getFieldProps?.(props.name); const fieldValue = props.value ?? fieldProps?.value; const handleChange = (event: ChangeEvent) => { @@ -28,7 +28,12 @@ export const InputRadioGroup: FC = ({ className, formikPro return ( {label && {label}} - + ); }; diff --git a/packages/ui-components/src/lib/inputs/InputSwitch/InputSwitch.tsx b/packages/ui-components/src/lib/inputs/InputSwitch/InputSwitch.tsx index a9a4d877..f8b3740f 100644 --- a/packages/ui-components/src/lib/inputs/InputSwitch/InputSwitch.tsx +++ b/packages/ui-components/src/lib/inputs/InputSwitch/InputSwitch.tsx @@ -66,6 +66,8 @@ export const InputSwitch: FC = ({ name={name} type="checkbox" className="lc-input-switch-input" + role="switch" + aria-checked={fieldValue} {...fieldProps} {...props} checked={fieldValue}