Handle undefined target in onBlur and onFocus handlers

There are some instances where the `onBlur` and `onFocus` handlers are receiving an undefined `target`, causing the following type error: ``` Cannot read properties of undefined (reading 'value') ``` - Updated all of the `onBlur()` and `onFocus()` handlers in all libraries to fix this - Updated the `CHANGELOG.md` accordingly
rjsf-team · Jun 21, 2024 · 10adf97 · 10adf97
1 parent 6e9c668
commit 10adf97
Show file tree

Hide file tree

Showing 45 changed files with 152 additions and 115 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,9 +18,43 @@ should change the heading of the (upcoming) version to include a major version b
 
 # 5.18.5
 
+## @rfsf/antd
+
+- Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
+
+## @rfsf/bootstrap4
+
+- Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
+
+## @rfsf/chakra-ui
+
+- Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
+
 ## @rjsf/core
 
 - Fix case where NumberField would not properly reset the field when using programmatic form reset (#4202)[https://github.com/rjsf-team/react-jsonschema-form/issues/4202]
+- Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
+
+## @rfsf/fluent-ui
+
+- Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
+
+## @rfsf/fluentui-rc
+
+- Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
+
+## @rfsf/material-ui
+
+- Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
+
+## @rfsf/mui
+
+- Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
+
+## @rfsf/semantic-ui
+
+- Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
+
 
 # 5.18.4
 

diff --git a/packages/antd/src/templates/BaseInputTemplate/index.tsx b/packages/antd/src/templates/BaseInputTemplate/index.tsx
@@ -50,9 +50,9 @@ export default function BaseInputTemplate<
     ? onChangeOverride
     : ({ target }: ChangeEvent<HTMLInputElement>) => onChange(target.value === '' ? options.emptyValue : target.value);
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target.value);
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
 
-  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
   const input =
     inputProps.type === 'number' || inputProps.type === 'integer' ? (

diff --git a/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx b/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx
@@ -65,7 +65,7 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target.value);
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target && target.value);
 
   // The `block` prop is not part of the `IconButtonProps` defined in the template, so put it into the uiSchema instead
   const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};

diff --git a/packages/antd/src/widgets/CheckboxWidget/index.tsx b/packages/antd/src/widgets/CheckboxWidget/index.tsx
@@ -25,9 +25,9 @@ export default function CheckboxWidget<
 
   const handleChange: NonNullable<CheckboxProps['onChange']> = ({ target }) => onChange(target.checked);
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target.checked);
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.checked);
 
-  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target.checked);
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.checked);
 
   // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
   // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors

diff --git a/packages/antd/src/widgets/RadioWidget/index.tsx b/packages/antd/src/widgets/RadioWidget/index.tsx
@@ -37,10 +37,10 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
     onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
 
   const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue));
+    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
   const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue));
+    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
   const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions) as string;
 

diff --git a/packages/antd/src/widgets/TextareaWidget/index.tsx b/packages/antd/src/widgets/TextareaWidget/index.tsx
@@ -38,9 +38,9 @@ export default function TextareaWidget<
   const handleChange = ({ target }: ChangeEvent<HTMLTextAreaElement>) =>
     onChange(target.value === '' ? options.emptyValue : target.value);
 
-  const handleBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target.value);
+  const handleBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
 
-  const handleFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
 
   // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
   // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors

diff --git a/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -39,8 +39,8 @@ export default function BaseInputTemplate<
   };
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
   // const classNames = [rawErrors.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
   return (

diff --git a/packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx b/packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx
@@ -44,8 +44,8 @@ export default function CheckboxWidget<
   );
 
   const _onChange = ({ target: { checked } }: FocusEvent<HTMLInputElement>) => onChange(checked);
-  const _onBlur = ({ target: { checked } }: FocusEvent<HTMLInputElement>) => onBlur(id, checked);
-  const _onFocus = ({ target: { checked } }: FocusEvent<HTMLInputElement>) => onFocus(id, checked);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.checked);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.checked);
 
   const description = options.description || schema.description;
   return (

diff --git a/packages/bootstrap-4/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/bootstrap-4/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -31,10 +31,10 @@ export default function CheckboxesWidget<
       }
     };
 
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
   return (
     <Form.Group>

diff --git a/packages/bootstrap-4/src/RadioWidget/RadioWidget.tsx b/packages/bootstrap-4/src/RadioWidget/RadioWidget.tsx
@@ -26,10 +26,10 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
 
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange(enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
   const inline = Boolean(options && options.inline);
 

diff --git a/packages/bootstrap-4/src/TextareaWidget/TextareaWidget.tsx b/packages/bootstrap-4/src/TextareaWidget/TextareaWidget.tsx
@@ -30,8 +30,8 @@ export default function TextareaWidget<
 }: CustomWidgetProps<T, S, F>) {
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
     onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, value);
+  const _onBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
 
   return (
     <InputGroup>

diff --git a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -42,8 +42,8 @@ export default function BaseInputTemplate<
 
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
   return (
     <FormControl

diff --git a/packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx b/packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx
@@ -46,8 +46,8 @@ export default function CheckboxWidget<
   const description = options.description || schema.description;
 
   const _onChange = ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => onChange(checked);
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) => onFocus(id, value);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.value);
 
   return (
     <FormControl mb={1} {...chakraProps} isRequired={required}>

diff --git a/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -38,10 +38,10 @@ export default function CheckboxesWidget<
   const chakraProps = getChakra({ uiSchema });
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
   const row = options ? options.inline : false;
   const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, true) as string[];

diff --git a/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx b/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx
@@ -30,8 +30,8 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const sliderWidgetProps = { value, label, id, ...rangeSpec<S>(schema) };
 
   const _onChange = (value: undefined | number) => onChange(value === undefined ? options.emptyValue : value);
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
   return (
     <FormControl mb={1} {...chakraProps}>

diff --git a/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx b/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx
@@ -54,11 +54,11 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
     return onChange(enumOptionsValueForIndex<S>(e.value, enumOptions, emptyValue));
   };
 
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
   const _valueLabelMap: any = {};
   const displayEnumOptions: OptionsOrGroups<any, any> = Array.isArray(enumOptions)

diff --git a/packages/chakra-ui/src/TextareaWidget/TextareaWidget.tsx b/packages/chakra-ui/src/TextareaWidget/TextareaWidget.tsx
@@ -35,8 +35,8 @@ export default function TextareaWidget<
 
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
     onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, value);
+  const _onBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
 
   return (
     <FormControl

diff --git a/packages/chakra-ui/src/UpDownWidget/UpDownWidget.tsx b/packages/chakra-ui/src/UpDownWidget/UpDownWidget.tsx
@@ -27,8 +27,8 @@ export default function UpDownWidget<T = any, S extends StrictRJSFSchema = RJSFS
   const chakraProps = getChakra({ uiSchema });
 
   const _onChange = (value: string | number) => onChange(value);
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) => onFocus(id, value);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.value);
 
   return (
     <FormControl

diff --git a/packages/core/src/components/templates/BaseInputTemplate.tsx b/packages/core/src/components/templates/BaseInputTemplate.tsx
@@ -65,9 +65,12 @@ export default function BaseInputTemplate<
     ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onChange(value === '' ? options.emptyValue : value),
     [onChange, options]
   );
-  const _onBlur = useCallback(({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value), [onBlur, id]);
+  const _onBlur = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value),
+    [onBlur, id]
+  );
   const _onFocus = useCallback(
-    ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value),
+    ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value),
     [onFocus, id]
   );
 

diff --git a/packages/core/src/components/templates/WrapIfAdditionalTemplate.tsx b/packages/core/src/components/templates/WrapIfAdditionalTemplate.tsx
@@ -58,7 +58,7 @@ export default function WrapIfAdditionalTemplate<
               className='form-control'
               type='text'
               id={`${id}-key`}
-              onBlur={(event) => onKeyChange(event.target.value)}
+              onBlur={({ target }) => onKeyChange(target && target.value)}
               defaultValue={label}
             />
           </div>

diff --git a/packages/core/src/components/widgets/CheckboxesWidget.tsx b/packages/core/src/components/widgets/CheckboxesWidget.tsx
@@ -31,14 +31,14 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
   const handleBlur = useCallback(
-    ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-      onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue)),
+    ({ target }: FocusEvent<HTMLInputElement>) =>
+      onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
     [onBlur, id]
   );
 
   const handleFocus = useCallback(
-    ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-      onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue)),
+    ({ target }: FocusEvent<HTMLInputElement>) =>
+      onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
     [onFocus, id]
   );
   return (

diff --git a/packages/core/src/components/widgets/RadioWidget.tsx b/packages/core/src/components/widgets/RadioWidget.tsx
@@ -30,14 +30,14 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
 
   const handleBlur = useCallback(
-    ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-      onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue)),
+    ({ target }: FocusEvent<HTMLInputElement>) =>
+      onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
     [onBlur, id]
   );
 
   const handleFocus = useCallback(
-    ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-      onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue)),
+    ({ target }: FocusEvent<HTMLInputElement>) =>
+      onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
     [onFocus, id]
   );
 

diff --git a/packages/core/src/components/widgets/TextareaWidget.tsx b/packages/core/src/components/widgets/TextareaWidget.tsx
@@ -24,12 +24,12 @@ function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
   );
 
   const handleBlur = useCallback(
-    ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, value),
+    ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value),
     [onBlur, id]
   );
 
   const handleFocus = useCallback(
-    ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, value),
+    ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value),
     [id, onFocus]
   );
 

diff --git a/packages/fluent-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/fluent-ui/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -80,8 +80,8 @@ export default function BaseInputTemplate<
   const inputProps = getInputProps<T, S, F>(schema, type, options);
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
   const uiProps = _pick((options.props as object) || {}, allowedProps);
 

diff --git a/packages/fluent-ui/src/CheckboxWidget/CheckboxWidget.tsx b/packages/fluent-ui/src/CheckboxWidget/CheckboxWidget.tsx
@@ -72,8 +72,8 @@ export default function CheckboxWidget<
     [onChange]
   );
 
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLButtonElement>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLButtonElement>) => onFocus(id, value);
+  const _onBlur = ({ target }: FocusEvent<HTMLButtonElement>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLButtonElement>) => onFocus(id, target && target.value);
 
   const uiProps = _pick((options.props as object) || {}, allowedProps);
   const description = options.description ?? schema.description;

diff --git a/packages/fluent-ui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/fluent-ui/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -48,11 +48,11 @@ export default function CheckboxesWidget<
     }
   };
 
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLButtonElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onBlur = ({ target }: FocusEvent<HTMLButtonElement>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLButtonElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onFocus = ({ target }: FocusEvent<HTMLButtonElement>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
   const uiProps = _pick((options.props as object) || {}, allowedProps);
 

diff --git a/packages/fluent-ui/src/DateWidget/DateWidget.tsx b/packages/fluent-ui/src/DateWidget/DateWidget.tsx
@@ -104,8 +104,8 @@ export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSch
       formatted && onChange(formatted);
     }
   };
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
   const uiProps = _pick((options.props as object) || {}, allowedProps);
   return (