From f8378c48d7ef51bc47c1c150578189d5a613f2c5 Mon Sep 17 00:00:00 2001 From: Heath C <51679588+heath-freenome@users.noreply.github.com> Date: Mon, 24 Jun 2024 10:19:42 -0700 Subject: [PATCH] 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 | 34 +++++++++++++++++++ .../src/templates/BaseInputTemplate/index.tsx | 4 +-- .../WrapIfAdditionalTemplate/index.tsx | 2 +- .../antd/src/widgets/CheckboxWidget/index.tsx | 4 +-- .../antd/src/widgets/RadioWidget/index.tsx | 4 +-- .../antd/src/widgets/TextareaWidget/index.tsx | 4 +-- .../BaseInputTemplate/BaseInputTemplate.tsx | 4 +-- .../src/CheckboxWidget/CheckboxWidget.tsx | 4 +-- .../src/CheckboxesWidget/CheckboxesWidget.tsx | 8 ++--- .../src/RadioWidget/RadioWidget.tsx | 8 ++--- .../src/TextareaWidget/TextareaWidget.tsx | 4 +-- .../BaseInputTemplate/BaseInputTemplate.tsx | 4 +-- .../src/CheckboxWidget/CheckboxWidget.tsx | 4 +-- .../src/CheckboxesWidget/CheckboxesWidget.tsx | 8 ++--- .../chakra-ui/src/RangeWidget/RangeWidget.tsx | 4 +-- .../src/SelectWidget/SelectWidget.tsx | 8 ++--- .../src/TextareaWidget/TextareaWidget.tsx | 4 +-- .../src/UpDownWidget/UpDownWidget.tsx | 4 +-- .../templates/BaseInputTemplate.tsx | 7 ++-- .../templates/WrapIfAdditionalTemplate.tsx | 2 +- .../components/widgets/CheckboxesWidget.tsx | 8 ++--- .../src/components/widgets/RadioWidget.tsx | 8 ++--- .../src/components/widgets/TextareaWidget.tsx | 4 +-- .../BaseInputTemplate/BaseInputTemplate.tsx | 4 +-- .../src/CheckboxWidget/CheckboxWidget.tsx | 4 +-- .../src/CheckboxesWidget/CheckboxesWidget.tsx | 8 ++--- .../fluent-ui/src/DateWidget/DateWidget.tsx | 4 +-- .../fluent-ui/src/RadioWidget/RadioWidget.tsx | 8 ++--- .../src/UpDownWidget/UpDownWidget.tsx | 4 +-- .../BaseInputTemplate/BaseInputTemplate.tsx | 4 +-- .../src/CheckboxWidget/CheckboxWidget.tsx | 4 +-- .../src/CheckboxesWidget/CheckboxesWidget.tsx | 8 ++--- .../src/RadioWidget/RadioWidget.tsx | 8 ++--- .../src/RangeWidget/RangeWidget.tsx | 4 +-- .../src/TextareaWidget/TextareaWidget.tsx | 4 +-- .../BaseInputTemplate/BaseInputTemplate.tsx | 4 +-- .../src/SelectWidget/SelectWidget.tsx | 8 ++--- .../BaseInputTemplate/BaseInputTemplate.tsx | 4 +-- .../mui/src/CheckboxWidget/CheckboxWidget.tsx | 4 +-- .../src/CheckboxesWidget/CheckboxesWidget.tsx | 8 ++--- packages/mui/src/RadioWidget/RadioWidget.tsx | 8 ++--- packages/mui/src/RangeWidget/RangeWidget.tsx | 4 +-- .../mui/src/SelectWidget/SelectWidget.tsx | 8 ++--- .../WrapIfAdditionalTemplate.tsx | 2 +- .../src/SelectWidget/SelectWidget.tsx | 8 ++--- 45 files changed, 152 insertions(+), 115 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ef4f2cb437..a265fe59ea 100644 --- 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 + ## @rjsf/validator-ajv6 diff --git a/packages/antd/src/templates/BaseInputTemplate/index.tsx b/packages/antd/src/templates/BaseInputTemplate/index.tsx index 8a18584793..71e7c86690 100644 --- 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) => onChange(target.value === '' ? options.emptyValue : target.value); - const handleBlur = ({ target }: FocusEvent) => onBlur(id, target.value); + const handleBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); - const handleFocus = ({ target }: FocusEvent) => onFocus(id, target.value); + const handleFocus = ({ target }: FocusEvent) => 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 index dc299205bb..3bce1e41de 100644 --- 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) => onKeyChange(target.value); + const handleBlur = ({ target }: FocusEvent) => 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 index fb08a5c094..9c8cf228c8 100644 --- 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 = ({ target }) => onChange(target.checked); - const handleBlur = ({ target }: FocusEvent) => onBlur(id, target.checked); + const handleBlur = ({ target }: FocusEvent) => onBlur(id, target && target.checked); - const handleFocus = ({ target }: FocusEvent) => onFocus(id, target.checked); + const handleFocus = ({ target }: FocusEvent) => 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 index 64ab3f4f85..4f32fb7b5c 100644 --- a/packages/antd/src/widgets/RadioWidget/index.tsx +++ b/packages/antd/src/widgets/RadioWidget/index.tsx @@ -37,10 +37,10 @@ export default function RadioWidget(nextValue, enumOptions, emptyValue)); const handleBlur = ({ target }: FocusEvent) => - onBlur(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue)); + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); const handleFocus = ({ target }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue)); + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); const selectedIndexes = enumOptionsIndexForValue(value, enumOptions) as string; diff --git a/packages/antd/src/widgets/TextareaWidget/index.tsx b/packages/antd/src/widgets/TextareaWidget/index.tsx index 95dc961f24..78f5ebb96c 100644 --- 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) => onChange(target.value === '' ? options.emptyValue : target.value); - const handleBlur = ({ target }: FocusEvent) => onBlur(id, target.value); + const handleBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); - const handleFocus = ({ target }: FocusEvent) => onFocus(id, target.value); + const handleFocus = ({ target }: FocusEvent) => 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 index 6a1789ec80..289eb4755d 100644 --- 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) => onChange(value === '' ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => 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 index a9185a2bdc..f7ab4747be 100644 --- 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) => onChange(checked); - const _onBlur = ({ target: { checked } }: FocusEvent) => onBlur(id, checked); - const _onFocus = ({ target: { checked } }: FocusEvent) => onFocus(id, checked); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.checked); + const _onFocus = ({ target }: FocusEvent) => 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 index 61e1176b10..226e759184 100644 --- 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) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); return ( diff --git a/packages/bootstrap-4/src/RadioWidget/RadioWidget.tsx b/packages/bootstrap-4/src/RadioWidget/RadioWidget.tsx index f1606f0580..5c5dd2f987 100644 --- a/packages/bootstrap-4/src/RadioWidget/RadioWidget.tsx +++ b/packages/bootstrap-4/src/RadioWidget/RadioWidget.tsx @@ -26,10 +26,10 @@ export default function RadioWidget) => onChange(enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const _onBlur = ({ target: { value } }: FocusEvent) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(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 index 1d1c1efcb2..f2509d5358 100644 --- 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) { const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === '' ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); return ( diff --git a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx index ff5847c595..db04dc1521 100644 --- 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) => onChange(value === '' ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); return ( ) => onChange(checked); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); return ( diff --git a/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx index 51dd9b2108..e4fbf14fa3 100644 --- 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) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); const row = options ? options.inline : false; const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true) as string[]; diff --git a/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx b/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx index 42d6b8ceed..a30c5c9cd4 100644 --- a/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx +++ b/packages/chakra-ui/src/RangeWidget/RangeWidget.tsx @@ -30,8 +30,8 @@ export default function RangeWidget(schema) }; const _onChange = (value: undefined | number) => onChange(value === undefined ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); return ( diff --git a/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx b/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx index 3d347796e5..87067d1222 100644 --- a/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx +++ b/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx @@ -54,11 +54,11 @@ export default function SelectWidget(e.value, enumOptions, emptyValue)); }; - const _onBlur = ({ target: { value } }: FocusEvent) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); const _valueLabelMap: any = {}; const displayEnumOptions: OptionsOrGroups = Array.isArray(enumOptions) diff --git a/packages/chakra-ui/src/TextareaWidget/TextareaWidget.tsx b/packages/chakra-ui/src/TextareaWidget/TextareaWidget.tsx index ca6f065223..c8f215a0b0 100644 --- 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) => onChange(value === '' ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); return ( onChange(value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); return ( ) => onChange(value === '' ? options.emptyValue : value), [onChange, options] ); - const _onBlur = useCallback(({ target: { value } }: FocusEvent) => onBlur(id, value), [onBlur, id]); + const _onBlur = useCallback( + ({ target }: FocusEvent) => onBlur(id, target && target.value), + [onBlur, id] + ); const _onFocus = useCallback( - ({ target: { value } }: FocusEvent) => onFocus(id, value), + ({ target }: FocusEvent) => 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 index e6e55224c9..de41c1135f 100644 --- 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} /> diff --git a/packages/core/src/components/widgets/CheckboxesWidget.tsx b/packages/core/src/components/widgets/CheckboxesWidget.tsx index 165e0a2a41..8d07696752 100644 --- a/packages/core/src/components/widgets/CheckboxesWidget.tsx +++ b/packages/core/src/components/widgets/CheckboxesWidget.tsx @@ -31,14 +31,14 @@ function CheckboxesWidget) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)), + ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)), [onBlur, id] ); const handleFocus = useCallback( - ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)), + ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(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 index 4619866306..85edddc2ae 100644 --- a/packages/core/src/components/widgets/RadioWidget.tsx +++ b/packages/core/src/components/widgets/RadioWidget.tsx @@ -30,14 +30,14 @@ function RadioWidget) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)), + ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)), [onBlur, id] ); const handleFocus = useCallback( - ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)), + ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(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 index 202087fec1..aa58c2dc77 100644 --- a/packages/core/src/components/widgets/TextareaWidget.tsx +++ b/packages/core/src/components/widgets/TextareaWidget.tsx @@ -24,12 +24,12 @@ function TextareaWidget) => onBlur(id, value), + ({ target }: FocusEvent) => onBlur(id, target && target.value), [onBlur, id] ); const handleFocus = useCallback( - ({ target: { value } }: FocusEvent) => onFocus(id, value), + ({ target }: FocusEvent) => 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 index d77b6de380..b1ea232f53 100644 --- 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(schema, type, options); const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === '' ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => 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 index 732c7bf2bb..8b3ff8b056 100644 --- 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) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => 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 index e52666971d..5ddbb7dc8b 100644 --- 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) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(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 index 4bf85ffed5..6ef3b18f4e 100644 --- a/packages/fluent-ui/src/DateWidget/DateWidget.tsx +++ b/packages/fluent-ui/src/DateWidget/DateWidget.tsx @@ -104,8 +104,8 @@ export default function DateWidget) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); const uiProps = _pick((options.props as object) || {}, allowedProps); return ( diff --git a/packages/fluent-ui/src/RadioWidget/RadioWidget.tsx b/packages/fluent-ui/src/RadioWidget/RadioWidget.tsx index 65b387cfba..8ebc4a9a34 100644 --- a/packages/fluent-ui/src/RadioWidget/RadioWidget.tsx +++ b/packages/fluent-ui/src/RadioWidget/RadioWidget.tsx @@ -48,10 +48,10 @@ export default function RadioWidget) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); const newOptions = Array.isArray(enumOptions) ? enumOptions.map((option, index) => ({ diff --git a/packages/fluent-ui/src/UpDownWidget/UpDownWidget.tsx b/packages/fluent-ui/src/UpDownWidget/UpDownWidget.tsx index 35507c55bc..f929787437 100644 --- a/packages/fluent-ui/src/UpDownWidget/UpDownWidget.tsx +++ b/packages/fluent-ui/src/UpDownWidget/UpDownWidget.tsx @@ -107,8 +107,8 @@ export default function UpDownWidget< } }; - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); const uiProps = _pick((options.props as object) || {}, allowedProps); diff --git a/packages/fluentui-rc/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/fluentui-rc/src/BaseInputTemplate/BaseInputTemplate.tsx index aeccbf1065..d6a308c58e 100644 --- a/packages/fluentui-rc/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/fluentui-rc/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -56,8 +56,8 @@ export default function BaseInputTemplate< // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === '' ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); return ( <> {labelValue( diff --git a/packages/fluentui-rc/src/CheckboxWidget/CheckboxWidget.tsx b/packages/fluentui-rc/src/CheckboxWidget/CheckboxWidget.tsx index f3a0343283..45f64d5829 100644 --- a/packages/fluentui-rc/src/CheckboxWidget/CheckboxWidget.tsx +++ b/packages/fluentui-rc/src/CheckboxWidget/CheckboxWidget.tsx @@ -48,8 +48,8 @@ export default function CheckboxWidget< const required = schemaRequiresTrueValue(schema); const _onChange = ({ target: { checked } }: ChangeEvent) => onChange(checked); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); const description = options.description ?? schema.description; return ( diff --git a/packages/fluentui-rc/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/fluentui-rc/src/CheckboxesWidget/CheckboxesWidget.tsx index ea6fb217aa..db240d767d 100644 --- a/packages/fluentui-rc/src/CheckboxesWidget/CheckboxesWidget.tsx +++ b/packages/fluentui-rc/src/CheckboxesWidget/CheckboxesWidget.tsx @@ -51,10 +51,10 @@ export default function CheckboxesWidget< } }; - const _onBlur = ({ target: { value } }: FocusEvent) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); return ( <> diff --git a/packages/fluentui-rc/src/RadioWidget/RadioWidget.tsx b/packages/fluentui-rc/src/RadioWidget/RadioWidget.tsx index cbbcffd94d..8d0aff9738 100644 --- a/packages/fluentui-rc/src/RadioWidget/RadioWidget.tsx +++ b/packages/fluentui-rc/src/RadioWidget/RadioWidget.tsx @@ -34,10 +34,10 @@ export default function RadioWidget onChange(enumOptionsValueForIndex(data.value, enumOptions, emptyValue)); - const _onBlur = ({ target: { value } }: FocusEvent) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); const selectedIndex = enumOptionsIndexForValue(value, enumOptions) ?? undefined; diff --git a/packages/fluentui-rc/src/RangeWidget/RangeWidget.tsx b/packages/fluentui-rc/src/RangeWidget/RangeWidget.tsx index 142c3d8751..87b457e9f1 100644 --- a/packages/fluentui-rc/src/RangeWidget/RangeWidget.tsx +++ b/packages/fluentui-rc/src/RangeWidget/RangeWidget.tsx @@ -25,8 +25,8 @@ export default function RangeWidget { onChange(data.value ?? options.emptyValue); }; - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); return ( <> diff --git a/packages/fluentui-rc/src/TextareaWidget/TextareaWidget.tsx b/packages/fluentui-rc/src/TextareaWidget/TextareaWidget.tsx index c11f4a3093..2e714b4591 100644 --- a/packages/fluentui-rc/src/TextareaWidget/TextareaWidget.tsx +++ b/packages/fluentui-rc/src/TextareaWidget/TextareaWidget.tsx @@ -46,8 +46,8 @@ export default function TextareaWidget< const classes = useStyles(); const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === '' ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); let rows: string | number = 5; if (typeof options.rows === 'string' || typeof options.rows === 'number') { diff --git a/packages/material-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/material-ui/src/BaseInputTemplate/BaseInputTemplate.tsx index 11ab3694dc..f46e6435d5 100644 --- a/packages/material-ui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/material-ui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -64,8 +64,8 @@ export default function BaseInputTemplate< }; const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === '' ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? { ...InputLabelProps, diff --git a/packages/material-ui/src/SelectWidget/SelectWidget.tsx b/packages/material-ui/src/SelectWidget/SelectWidget.tsx index ba89a5b1f6..8abdb1618d 100644 --- a/packages/material-ui/src/SelectWidget/SelectWidget.tsx +++ b/packages/material-ui/src/SelectWidget/SelectWidget.tsx @@ -54,10 +54,10 @@ export default function SelectWidget< const _onChange = ({ target: { value } }: ChangeEvent<{ value: string }>) => onChange(enumOptionsValueForIndex(value, enumOptions, optEmptyVal)); - const _onBlur = ({ target: { value } }: FocusEvent) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal)); const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple); return ( diff --git a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx index 8d14f2e3bb..9c3f0a706a 100644 --- a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -65,8 +65,8 @@ export default function BaseInputTemplate< }; const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === '' ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? { ...InputLabelProps, diff --git a/packages/mui/src/CheckboxWidget/CheckboxWidget.tsx b/packages/mui/src/CheckboxWidget/CheckboxWidget.tsx index 7e7041cefa..ad1d1d7d37 100644 --- a/packages/mui/src/CheckboxWidget/CheckboxWidget.tsx +++ b/packages/mui/src/CheckboxWidget/CheckboxWidget.tsx @@ -50,8 +50,8 @@ export default function CheckboxWidget< const required = schemaRequiresTrueValue(schema); const _onChange = (_: any, checked: boolean) => onChange(checked); - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); const description = options.description ?? schema.description; return ( diff --git a/packages/mui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/mui/src/CheckboxesWidget/CheckboxesWidget.tsx index c16fcda17a..e1117f2c8b 100644 --- a/packages/mui/src/CheckboxesWidget/CheckboxesWidget.tsx +++ b/packages/mui/src/CheckboxesWidget/CheckboxesWidget.tsx @@ -53,10 +53,10 @@ export default function CheckboxesWidget< } }; - const _onBlur = ({ target: { value } }: FocusEvent) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); return ( <> diff --git a/packages/mui/src/RadioWidget/RadioWidget.tsx b/packages/mui/src/RadioWidget/RadioWidget.tsx index 10c124554d..bceed3089d 100644 --- a/packages/mui/src/RadioWidget/RadioWidget.tsx +++ b/packages/mui/src/RadioWidget/RadioWidget.tsx @@ -36,10 +36,10 @@ export default function RadioWidget onChange(enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const _onBlur = ({ target: { value } }: FocusEvent) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); const row = options ? options.inline : false; const selectedIndex = enumOptionsIndexForValue(value, enumOptions) ?? null; diff --git a/packages/mui/src/RangeWidget/RangeWidget.tsx b/packages/mui/src/RangeWidget/RangeWidget.tsx index b5faeddfa2..46b5e56c1d 100644 --- a/packages/mui/src/RangeWidget/RangeWidget.tsx +++ b/packages/mui/src/RangeWidget/RangeWidget.tsx @@ -26,8 +26,8 @@ export default function RangeWidget { onChange(value ?? options.emptyValue); }; - const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ target: { value } }: FocusEvent) => onFocus(id, value); + const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); + const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); return ( <> diff --git a/packages/mui/src/SelectWidget/SelectWidget.tsx b/packages/mui/src/SelectWidget/SelectWidget.tsx index 5860de2cf6..7b967edc0a 100644 --- a/packages/mui/src/SelectWidget/SelectWidget.tsx +++ b/packages/mui/src/SelectWidget/SelectWidget.tsx @@ -55,10 +55,10 @@ export default function SelectWidget< const _onChange = ({ target: { value } }: ChangeEvent<{ value: string }>) => onChange(enumOptionsValueForIndex(value, enumOptions, optEmptyVal)); - const _onBlur = ({ target: { value } }: FocusEvent) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal)); - const _onFocus = ({ target: { value } }: FocusEvent) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal)); + const _onBlur = ({ target }: FocusEvent) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal)); + const _onFocus = ({ target }: FocusEvent) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal)); const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple); const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps; diff --git a/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx b/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx index 6c9c079aa2..4907878f9d 100644 --- a/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx +++ b/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx @@ -55,7 +55,7 @@ export default function WrapIfAdditionalTemplate< ); } - const handleBlur = ({ target }: FocusEvent) => onKeyChange(target.value); + const handleBlur = ({ target }: FocusEvent) => onKeyChange(target && target.value); return ( diff --git a/packages/semantic-ui/src/SelectWidget/SelectWidget.tsx b/packages/semantic-ui/src/SelectWidget/SelectWidget.tsx index 3f95c2dc06..a21d7f7ace 100644 --- a/packages/semantic-ui/src/SelectWidget/SelectWidget.tsx +++ b/packages/semantic-ui/src/SelectWidget/SelectWidget.tsx @@ -80,10 +80,10 @@ export default function SelectWidget, { value }: DropdownProps) => onChange(enumOptionsValueForIndex(value as string[], enumOptions, optEmptyVal)); // eslint-disable-next-line no-shadow - const _onBlur = (_: FocusEvent, { target: { value } }: DropdownProps) => - onBlur(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal)); - const _onFocus = (_: FocusEvent, { target: { value } }: DropdownProps) => - onFocus(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal)); + const _onBlur = (_: FocusEvent, { target }: DropdownProps) => + onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal)); + const _onFocus = (_: FocusEvent, { target }: DropdownProps) => + onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal)); const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple); return (