Handle undefined target in onBlur and onFocus handlers (#4227)

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

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
+
 
 ## @rjsf/validator-ajv6
 

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' ? (

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] : {};

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

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;
 

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

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 (

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 (

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>

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

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>

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

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

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[];

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

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)

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

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

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]
  );
 

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>

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 (

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]
  );
 

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]
  );
 

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

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;

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

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 (