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 01/16] 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 ( From 86048e329e0394e12195b3e24e9d67f5308162a7 Mon Sep 17 00:00:00 2001 From: shaddollxz <56341682+shaddollxz@users.noreply.github.com> Date: Wed, 26 Jun 2024 05:42:29 +0800 Subject: [PATCH 02/16] fix(core): field ui-options higher priority (#4212) * fix(core): field ui-options higher priority * docs(root): changelog * Update CHANGELOG.md --------- Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> --- CHANGELOG.md | 5 ++- packages/core/src/components/Form.tsx | 4 +- .../src/components/fields/ObjectField.tsx | 4 +- .../src/components/fields/SchemaField.tsx | 6 +-- packages/core/test/uiSchema.test.jsx | 38 ++++++++++++++++--- packages/utils/src/types.ts | 12 +++--- 6 files changed, 48 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a265fe59ea..0299113013 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ should change the heading of the (upcoming) version to include a major version b - 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 +- Fix field disable or readonly property can't cover globalOptions corresponding property (#4212)[https://github.com/rjsf-team/react-jsonschema-form/pull/4212] ## @rfsf/fluent-ui @@ -55,7 +56,6 @@ should change the heading of the (upcoming) version to include a major version b - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers - ## @rjsf/validator-ajv6 - Improved performance issues with large schema dependencies and oneOf conditions [#4203](https://github.com/rjsf-team/react-jsonschema-form/issues/4203). @@ -95,6 +95,7 @@ should change the heading of the (upcoming) version to include a major version b # 5.18.0 ## @rjsf/antd + - Fix issue where the theme provided by the ConfigProvider under antd v5 wasn't respected thereby rendering the form items unusable under dark themes [#4129](https://github.com/rjsf-team/react-jsonschema-form/issues/4129) ## @rjsf/core @@ -133,7 +134,7 @@ should change the heading of the (upcoming) version to include a major version b ## Dev / docs / playground -- [#4080](https://github.com/rjsf-team/react-jsonschema-form/issues/4080) - Moved the `base64` encoder/decoder object to the Playground package. +- [#4080](https://github.com/rjsf-team/react-jsonschema-form/issues/4080) - Moved the `base64` encoder/decoder object to the Playground package. - Added test configuration and script to the Playground. # 5.17.0 diff --git a/packages/core/src/components/Form.tsx b/packages/core/src/components/Form.tsx index f77849207b..b5e6d46bb2 100644 --- a/packages/core/src/components/Form.tsx +++ b/packages/core/src/components/Form.tsx @@ -877,8 +877,8 @@ export default class Form< acceptcharset, acceptCharset, noHtml5Validate = false, - disabled = false, - readonly = false, + disabled, + readonly, formContext, showErrorList = 'top', _internalFormWrapper, diff --git a/packages/core/src/components/fields/ObjectField.tsx b/packages/core/src/components/fields/ObjectField.tsx index dfde7fe1c3..eb4e1d4d99 100644 --- a/packages/core/src/components/fields/ObjectField.tsx +++ b/packages/core/src/components/fields/ObjectField.tsx @@ -236,8 +236,8 @@ class ObjectField(schema, uiOptions, idSchema, registry); - const disabled = Boolean(props.disabled || uiOptions.disabled); - const readonly = Boolean(props.readonly || uiOptions.readonly || props.schema.readOnly || schema.readOnly); + const disabled = Boolean(uiOptions.disabled ?? props.disabled); + const readonly = Boolean(uiOptions.readonly ?? props.readonly ?? props.schema.readOnly ?? schema.readOnly); const uiSchemaHideError = uiOptions.hideError; // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children const hideError = uiSchemaHideError === undefined ? props.hideError : Boolean(uiSchemaHideError); - const autofocus = Boolean(props.autofocus || uiOptions.autofocus); + const autofocus = Boolean(uiOptions.autofocus ?? props.autofocus); if (Object.keys(schema).length === 0) { return null; } diff --git a/packages/core/test/uiSchema.test.jsx b/packages/core/test/uiSchema.test.jsx index eec82a2bb2..b60406b28d 100644 --- a/packages/core/test/uiSchema.test.jsx +++ b/packages/core/test/uiSchema.test.jsx @@ -2505,9 +2505,7 @@ describe('uiSchema', () => { }); describe('ObjectField', () => { - let node; - - beforeEach(() => { + it('should mark as readonly an ObjectField', () => { const schema = { type: 'object', properties: { @@ -2523,13 +2521,41 @@ describe('uiSchema', () => { const uiSchema = {}; let rendered = createFormComponent({ schema, uiSchema }); - node = rendered.node; - }); + const node = rendered.node; - it('should mark as readonly an ObjectField', () => { const disabled = [].map.call(node.querySelectorAll('[type=text]'), (node) => node.hasAttribute('readonly')); expect(disabled).eql([true, true]); }); + + it('should not mark as readonly even if globalOptions set readonly', () => { + const schema = { + type: 'object', + properties: { + foo: { + type: 'string', + }, + bar: { + type: 'string', + }, + }, + readOnly: true, + }; + + const uiSchema = { + 'ui:globalOptions': { + readonly: true, + }, + foo: { + 'ui:readonly': false, + }, + }; + + let rendered = createFormComponent({ schema, uiSchema }); + const node = rendered.node; + + const disabled = [].map.call(node.querySelectorAll('[type=text]'), (node) => node.hasAttribute('readonly')); + expect(disabled).eql([false, true]); + }); }); }); diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts index 4343be2353..0d3461eed1 100644 --- a/packages/utils/src/types.ts +++ b/packages/utils/src/types.ts @@ -380,11 +380,11 @@ export interface FieldProps (event?: any) => void; /** A boolean value stating if the array item is read-only */ - readonly: boolean; + readonly?: boolean; /** A stable, unique key for the array item */ key: string; /** The schema object for this array item */ @@ -631,9 +631,9 @@ export type ObjectFieldTemplatePropertyType = { /** A string representing the property name */ name: string; /** A boolean value stating if the object property is disabled */ - disabled: boolean; + disabled?: boolean; /** A boolean value stating if the property is read-only */ - readonly: boolean; + readonly?: boolean; /** A boolean value stating if the property should be hidden */ hidden: boolean; }; From 40ea3c408b71bb61c53344a943d91817960af30a Mon Sep 17 00:00:00 2001 From: Heath C <51679588+heath-freenome@users.noreply.github.com> Date: Wed, 26 Jun 2024 09:27:37 -0700 Subject: [PATCH 03/16] Release 5.18.5 (#4230) * - Fixed spelling mistake for `rjsf` in `CHANGELOG.md` * v5.18.5 --- CHANGELOG.md | 16 ++-- lerna.json | 2 +- package-lock.json | 136 +++++++++++++-------------- packages/antd/package.json | 10 +- packages/bootstrap-4/package.json | 10 +- packages/chakra-ui/package.json | 10 +- packages/core/package.json | 10 +- packages/docs/package.json | 2 +- packages/fluent-ui/package.json | 10 +- packages/fluentui-rc/package.json | 10 +- packages/material-ui/package.json | 10 +- packages/mui/package.json | 10 +- packages/playground/package.json | 26 ++--- packages/semantic-ui/package.json | 10 +- packages/snapshot-tests/package.json | 8 +- packages/utils/package.json | 2 +- packages/validator-ajv6/package.json | 4 +- packages/validator-ajv8/package.json | 4 +- 18 files changed, 145 insertions(+), 145 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0299113013..9b908b85d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,15 +18,15 @@ should change the heading of the (upcoming) version to include a major version b # 5.18.5 -## @rfsf/antd +## @rjsf/antd - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers -## @rfsf/bootstrap4 +## @rjsf/bootstrap4 - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers -## @rfsf/chakra-ui +## @rjsf/chakra-ui - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers @@ -36,23 +36,23 @@ should change the heading of the (upcoming) version to include a major version b - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers - Fix field disable or readonly property can't cover globalOptions corresponding property (#4212)[https://github.com/rjsf-team/react-jsonschema-form/pull/4212] -## @rfsf/fluent-ui +## @rjsf/fluent-ui - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers -## @rfsf/fluentui-rc +## @rjsf/fluentui-rc - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers -## @rfsf/material-ui +## @rjsf/material-ui - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers -## @rfsf/mui +## @rjsf/mui - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers -## @rfsf/semantic-ui +## @rjsf/semantic-ui - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers diff --git a/lerna.json b/lerna.json index 285213ce50..9c69010fe3 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "packages": ["packages/*"], - "version": "5.18.4", + "version": "5.18.5", "$schema": "node_modules/lerna/schemas/lerna-schema.json", "useNx": true, "useWorkspaces": true diff --git a/package-lock.json b/package-lock.json index 6ffc9b4d03..2799f79b92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33830,7 +33830,7 @@ }, "packages/antd": { "name": "@rjsf/antd", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { "classnames": "^2.5.1", @@ -33848,10 +33848,10 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@rollup/plugin-replace": "^5.0.5", "@types/jest": "^29.5.12", "@types/lodash": "^4.14.202", @@ -34527,7 +34527,7 @@ }, "packages/bootstrap-4": { "name": "@rjsf/bootstrap-4", - "version": "5.18.4", + "version": "5.18.5", "license": "MIT", "dependencies": { "@react-icons/all-files": "^4.1.0" @@ -34539,10 +34539,10 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/react": "^18.2.58", "@types/react-dom": "^18.2.19", @@ -34572,7 +34572,7 @@ }, "packages/chakra-ui": { "name": "@rjsf/chakra-ui", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { "react-select": "^5.8.0" @@ -34591,10 +34591,10 @@ "@emotion/jest": "^11.11.0", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/react": "^18.2.58", "@types/react-dom": "^18.2.19", @@ -34671,7 +34671,7 @@ }, "packages/core": { "name": "@rjsf/core", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { "lodash": "^4.17.21", @@ -34687,10 +34687,10 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv6": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv6": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/lodash": "^4.14.202", "@types/react": "^18.2.58", @@ -34748,7 +34748,7 @@ }, "packages/docs": { "name": "@rjsf/docs", - "version": "5.18.4", + "version": "5.18.5", "dependencies": { "@docusaurus/core": "^2.4.0", "@docusaurus/preset-classic": "^2.4.3", @@ -34790,7 +34790,7 @@ }, "packages/fluent-ui": { "name": "@rjsf/fluent-ui", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { "lodash": "^4.17.21", @@ -34804,10 +34804,10 @@ "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", "@fluentui/react": "^8.115.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/lodash": "^4.14.202", "@types/react": "^18.2.58", @@ -34837,7 +34837,7 @@ }, "packages/fluentui-rc": { "name": "@rjsf/fluentui-rc", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { "@fluentui/react-components": "^9.46.3", @@ -34851,10 +34851,10 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/react": "^18.2.58", "@types/react-dom": "^18.2.19", @@ -34881,7 +34881,7 @@ }, "packages/material-ui": { "name": "@rjsf/material-ui", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "devDependencies": { "@babel/core": "^7.23.9", @@ -34892,10 +34892,10 @@ "@babel/preset-typescript": "^7.23.3", "@material-ui/core": "^4.12.4", "@material-ui/icons": "^4.11.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/react": "^18.2.58", "@types/react-dom": "^18.2.19", @@ -34925,7 +34925,7 @@ }, "packages/mui": { "name": "@rjsf/mui", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "devDependencies": { "@babel/core": "^7.23.9", @@ -34940,10 +34940,10 @@ "@mui/base": "5.0.0-beta.28", "@mui/icons-material": "5.15.2", "@mui/material": "5.15.2", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/react": "^18.2.58", "@types/react-dom": "^18.2.19", @@ -34976,7 +34976,7 @@ }, "packages/playground": { "name": "@rjsf/playground", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { "@ant-design/icons": "^4.8.1", @@ -34987,18 +34987,18 @@ "@material-ui/core": "^4.12.4", "@mui/base": "5.0.0-beta.28", "@mui/material": "5.15.2", - "@rjsf/antd": "^5.18.4", - "@rjsf/bootstrap-4": "^5.18.4", - "@rjsf/chakra-ui": "^5.18.4", - "@rjsf/core": "^5.18.4", - "@rjsf/fluent-ui": "^5.18.4", - "@rjsf/fluentui-rc": "^5.18.4", - "@rjsf/material-ui": "^5.18.4", - "@rjsf/mui": "^5.18.4", - "@rjsf/semantic-ui": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv6": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/antd": "^5.18.5", + "@rjsf/bootstrap-4": "^5.18.5", + "@rjsf/chakra-ui": "^5.18.5", + "@rjsf/core": "^5.18.5", + "@rjsf/fluent-ui": "^5.18.5", + "@rjsf/fluentui-rc": "^5.18.5", + "@rjsf/material-ui": "^5.18.5", + "@rjsf/mui": "^5.18.5", + "@rjsf/semantic-ui": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv6": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "ajv": "^8.12.0", "ajv-formats": "^2.1.1", "ajv-i18n": "^4.2.0", @@ -35090,7 +35090,7 @@ }, "packages/semantic-ui": { "name": "@rjsf/semantic-ui", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { "semantic-ui-css": "^2.5.0" @@ -35102,10 +35102,10 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/lodash": "^4.14.202", "@types/react": "^18.2.58", @@ -35138,12 +35138,12 @@ }, "packages/snapshot-tests": { "name": "@rjsf/snapshot-tests", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { - "@rjsf/core": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4" + "@rjsf/core": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5" }, "devDependencies": { "@types/jest": "^29.5.12", @@ -35164,7 +35164,7 @@ }, "packages/utils": { "name": "@rjsf/utils", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { "json-schema-merge-allof": "^0.8.1", @@ -35208,7 +35208,7 @@ }, "packages/validator-ajv6": { "name": "@rjsf/validator-ajv6", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { "ajv": "^6.12.6", @@ -35222,7 +35222,7 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/utils": "^5.18.4", + "@rjsf/utils": "^5.18.5", "@types/jest": "^29.5.12", "@types/json-schema": "^7.0.15", "@types/lodash": "^4.14.202", @@ -35244,7 +35244,7 @@ }, "packages/validator-ajv8": { "name": "@rjsf/validator-ajv8", - "version": "5.18.4", + "version": "5.18.5", "license": "Apache-2.0", "dependencies": { "ajv": "^8.12.0", @@ -35259,7 +35259,7 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/utils": "^5.18.4", + "@rjsf/utils": "^5.18.5", "@types/jest": "^29.5.12", "@types/json-schema": "^7.0.15", "@types/lodash": "^4.14.202", diff --git a/packages/antd/package.json b/packages/antd/package.json index c0045d2857..234e21aaa1 100644 --- a/packages/antd/package.json +++ b/packages/antd/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/antd", - "version": "5.18.4", + "version": "5.18.5", "description": "Ant Design theme, fields and widgets for react-jsonschema-form", "main": "dist/index.js", "module": "lib/index.js", @@ -56,10 +56,10 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@rollup/plugin-replace": "^5.0.5", "@types/jest": "^29.5.12", "@types/lodash": "^4.14.202", diff --git a/packages/bootstrap-4/package.json b/packages/bootstrap-4/package.json index 1eb6a21690..f408f672e9 100644 --- a/packages/bootstrap-4/package.json +++ b/packages/bootstrap-4/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/bootstrap-4", - "version": "5.18.4", + "version": "5.18.5", "main": "dist/index.js", "module": "lib/index.js", "typings": "lib/index.d.ts", @@ -49,10 +49,10 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/react": "^18.2.58", "@types/react-dom": "^18.2.19", diff --git a/packages/chakra-ui/package.json b/packages/chakra-ui/package.json index 8c590b5908..6c5737590b 100644 --- a/packages/chakra-ui/package.json +++ b/packages/chakra-ui/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/chakra-ui", - "version": "5.18.4", + "version": "5.18.5", "description": "Chakra UI theme, fields, and widgets for react-jsonschema-form", "main": "dist/index.js", "module": "lib/index.js", @@ -68,10 +68,10 @@ "@emotion/jest": "^11.11.0", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/react": "^18.2.58", "@types/react-dom": "^18.2.19", diff --git a/packages/core/package.json b/packages/core/package.json index 849b239c76..5027993ed3 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/core", - "version": "5.18.4", + "version": "5.18.5", "description": "A simple React component capable of building HTML forms out of a JSON schema.", "scripts": { "build:ts": "tsc -b", @@ -54,10 +54,10 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv6": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv6": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/lodash": "^4.14.202", "@types/react": "^18.2.58", diff --git a/packages/docs/package.json b/packages/docs/package.json index 55c38e7f20..79a43ada9a 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/docs", - "version": "5.18.4", + "version": "5.18.5", "private": true, "scripts": { "docusaurus": "docusaurus", diff --git a/packages/fluent-ui/package.json b/packages/fluent-ui/package.json index 4c264cb67e..1d386cb717 100644 --- a/packages/fluent-ui/package.json +++ b/packages/fluent-ui/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/fluent-ui", - "version": "5.18.4", + "version": "5.18.5", "main": "dist/index.js", "module": "lib/index.js", "typings": "lib/index.d.ts", @@ -46,10 +46,10 @@ "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", "@fluentui/react": "^8.115.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/lodash": "^4.14.202", "@types/react": "^18.2.58", diff --git a/packages/fluentui-rc/package.json b/packages/fluentui-rc/package.json index db7ba83cd9..7cbff2ed23 100644 --- a/packages/fluentui-rc/package.json +++ b/packages/fluentui-rc/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/fluentui-rc", - "version": "5.18.4", + "version": "5.18.5", "description": "FluentUI React Components theme, fields and widgets for react-jsonschema-form", "scripts": { "build:ts": "tsc -b", @@ -52,10 +52,10 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/react": "^18.2.58", "@types/react-dom": "^18.2.19", diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json index 16d3262cb4..58a7d13e97 100644 --- a/packages/material-ui/package.json +++ b/packages/material-ui/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/material-ui", - "version": "5.18.4", + "version": "5.18.5", "main": "./dist/index.js", "module": "./lib/index.js", "types": "./lib/index.d.ts", @@ -47,10 +47,10 @@ "@babel/preset-typescript": "^7.23.3", "@material-ui/core": "^4.12.4", "@material-ui/icons": "^4.11.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/react": "^18.2.58", "@types/react-dom": "^18.2.19", diff --git a/packages/mui/package.json b/packages/mui/package.json index 98c0dabd93..c3b92875b3 100644 --- a/packages/mui/package.json +++ b/packages/mui/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/mui", - "version": "5.18.4", + "version": "5.18.5", "main": "./dist/index.js", "module": "./lib/index.js", "types": "./lib/index.d.ts", @@ -53,10 +53,10 @@ "@mui/base": "5.0.0-beta.28", "@mui/icons-material": "5.15.2", "@mui/material": "5.15.2", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/react": "^18.2.58", "@types/react-dom": "^18.2.19", diff --git a/packages/playground/package.json b/packages/playground/package.json index b65d99cf79..5b21848d41 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/playground", - "version": "5.18.4", + "version": "5.18.5", "description": "rjsf playground", "private": true, "type": "commonjs", @@ -42,18 +42,18 @@ "@material-ui/core": "^4.12.4", "@mui/base": "5.0.0-beta.28", "@mui/material": "5.15.2", - "@rjsf/antd": "^5.18.4", - "@rjsf/bootstrap-4": "^5.18.4", - "@rjsf/chakra-ui": "^5.18.4", - "@rjsf/core": "^5.18.4", - "@rjsf/fluent-ui": "^5.18.4", - "@rjsf/fluentui-rc": "^5.18.4", - "@rjsf/material-ui": "^5.18.4", - "@rjsf/mui": "^5.18.4", - "@rjsf/semantic-ui": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv6": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/antd": "^5.18.5", + "@rjsf/bootstrap-4": "^5.18.5", + "@rjsf/chakra-ui": "^5.18.5", + "@rjsf/core": "^5.18.5", + "@rjsf/fluent-ui": "^5.18.5", + "@rjsf/fluentui-rc": "^5.18.5", + "@rjsf/material-ui": "^5.18.5", + "@rjsf/mui": "^5.18.5", + "@rjsf/semantic-ui": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv6": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "ajv": "^8.12.0", "ajv-formats": "^2.1.1", "ajv-i18n": "^4.2.0", diff --git a/packages/semantic-ui/package.json b/packages/semantic-ui/package.json index c379db861a..0037ecf1d6 100644 --- a/packages/semantic-ui/package.json +++ b/packages/semantic-ui/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/semantic-ui", - "version": "5.18.4", + "version": "5.18.5", "main": "dist/index.js", "module": "lib/index.js", "typings": "lib/index.d.ts", @@ -45,10 +45,10 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/core": "^5.18.4", - "@rjsf/snapshot-tests": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4", + "@rjsf/core": "^5.18.5", + "@rjsf/snapshot-tests": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5", "@types/jest": "^29.5.12", "@types/lodash": "^4.14.202", "@types/react": "^18.2.58", diff --git a/packages/snapshot-tests/package.json b/packages/snapshot-tests/package.json index 61392937e9..4a717adabc 100644 --- a/packages/snapshot-tests/package.json +++ b/packages/snapshot-tests/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/snapshot-tests", - "version": "5.18.4", + "version": "5.18.5", "description": "A set of snapshot tests to be used for testing RJSF theme.", "scripts": { "build": "tsc -b .", @@ -32,9 +32,9 @@ "react-test-renderer": "^17.0.2" }, "dependencies": { - "@rjsf/core": "^5.18.4", - "@rjsf/utils": "^5.18.4", - "@rjsf/validator-ajv8": "^5.18.4" + "@rjsf/core": "^5.18.5", + "@rjsf/utils": "^5.18.5", + "@rjsf/validator-ajv8": "^5.18.5" }, "devDependencies": { "@types/jest": "^29.5.12", diff --git a/packages/utils/package.json b/packages/utils/package.json index c1daf7d5fe..6c22b01234 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/utils", - "version": "5.18.4", + "version": "5.18.5", "main": "dist/index.js", "module": "lib/index.js", "typings": "lib/index.d.ts", diff --git a/packages/validator-ajv6/package.json b/packages/validator-ajv6/package.json index 800d610ade..11007b168e 100644 --- a/packages/validator-ajv6/package.json +++ b/packages/validator-ajv6/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/validator-ajv6", - "version": "5.18.4", + "version": "5.18.5", "main": "dist/index.js", "module": "lib/index.js", "typings": "lib/index.d.ts", @@ -46,7 +46,7 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/utils": "^5.18.4", + "@rjsf/utils": "^5.18.5", "@types/jest": "^29.5.12", "@types/json-schema": "^7.0.15", "@types/lodash": "^4.14.202", diff --git a/packages/validator-ajv8/package.json b/packages/validator-ajv8/package.json index 2bb398a95e..8a8f0b9567 100644 --- a/packages/validator-ajv8/package.json +++ b/packages/validator-ajv8/package.json @@ -1,6 +1,6 @@ { "name": "@rjsf/validator-ajv8", - "version": "5.18.4", + "version": "5.18.5", "main": "dist/index.js", "module": "lib/index.js", "typings": "lib/index.d.ts", @@ -48,7 +48,7 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@rjsf/utils": "^5.18.4", + "@rjsf/utils": "^5.18.5", "@types/jest": "^29.5.12", "@types/json-schema": "^7.0.15", "@types/lodash": "^4.14.202", From 3d851f4076181d11cd32582942ef13d40ee070e1 Mon Sep 17 00:00:00 2001 From: Changyu Geng Date: Sat, 29 Jun 2024 04:35:32 +0800 Subject: [PATCH 04/16] fix(antd): disabled property of options of antd theme (#4216) * fix: disabled property of options in CheckboxesWidget and RadioWidget of antd theme * chore: update CHANGELOG.md for #4216 * chore: update formTests * chore: update PULL_REQUEST_TEMPLATE.md for test * Update CHANGELOG.md --------- Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> --- CHANGELOG.md | 6 + PULL_REQUEST_TEMPLATE.md | 2 +- .../src/widgets/CheckboxesWidget/index.tsx | 2 +- .../antd/src/widgets/RadioWidget/index.tsx | 2 +- .../test/__snapshots__/Form.test.tsx.snap | 285 +++ .../test/__snapshots__/Form.test.tsx.snap | 216 ++ .../test/__snapshots__/Form.test.tsx.snap | 599 ++++++ .../test/__snapshots__/FormSnap.test.jsx.snap | 198 ++ .../test/__snapshots__/Form.test.tsx.snap | 560 ++++- .../test/__snapshots__/Form.test.tsx.snap | 254 ++- .../test/__snapshots__/Form.test.tsx.snap | 533 ++++- .../mui/test/__snapshots__/Form.test.tsx.snap | 1895 +++++++++++++---- .../test/__snapshots__/Form.test.tsx.snap | 252 +++ packages/snapshot-tests/src/formTests.tsx | 30 + 14 files changed, 4258 insertions(+), 576 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b908b85d9..8954158503 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,12 @@ should change the heading of the (upcoming) version to include a major version b --> +# 5.18.6 + +## @rjsf/antd + +- Fix disabled property of options in CheckboxesWidget and RadioWidget ([#4216](https://github.com/rjsf-team/react-jsonschema-form/pull/4216)) + # 5.18.5 ## @rjsf/antd diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index b2606d29e9..d9836abdd3 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -11,7 +11,7 @@ If your PR is non-trivial and you'd like to schedule a synchronous review, pleas - [ ] **I'm updating documentation** - [ ] I've [checked the rendering](https://rjsf-team.github.io/react-jsonschema-form/docs/contributing) of the Markdown text I've added - [ ] **I'm adding or updating code** - - [ ] I've added and/or updated tests. I've run `npm run test:update` to update snapshots, if needed. + - [ ] I've added and/or updated tests. I've run `npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:update` to update snapshots, if needed. - [ ] I've updated [docs](https://rjsf-team.github.io/react-jsonschema-form/docs) if needed - [ ] I've updated the [changelog](https://github.com/rjsf-team/react-jsonschema-form/blob/main/CHANGELOG.md) with a description of the PR - [ ] **I'm adding a new feature** diff --git a/packages/antd/src/widgets/CheckboxesWidget/index.tsx b/packages/antd/src/widgets/CheckboxesWidget/index.tsx index 6fd6f8e8b8..1d6b8b0c45 100644 --- a/packages/antd/src/widgets/CheckboxesWidget/index.tsx +++ b/packages/antd/src/widgets/CheckboxesWidget/index.tsx @@ -61,7 +61,7 @@ export default function CheckboxesWidget< id={optionId(id, i)} name={id} autoFocus={i === 0 ? autofocus : false} - disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1} + disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1} value={String(i)} > {option.label} diff --git a/packages/antd/src/widgets/RadioWidget/index.tsx b/packages/antd/src/widgets/RadioWidget/index.tsx index 4f32fb7b5c..ea59a9b56b 100644 --- a/packages/antd/src/widgets/RadioWidget/index.tsx +++ b/packages/antd/src/widgets/RadioWidget/index.tsx @@ -61,7 +61,7 @@ export default function RadioWidget diff --git a/packages/antd/test/__snapshots__/Form.test.tsx.snap b/packages/antd/test/__snapshots__/Form.test.tsx.snap index dfb63ca9c3..b30d98564c 100644 --- a/packages/antd/test/__snapshots__/Form.test.tsx.snap +++ b/packages/antd/test/__snapshots__/Form.test.tsx.snap @@ -2674,6 +2674,181 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` `; +exports[`single fields select field multiple choice enumDisabled using checkboxes 1`] = ` +
+
+
+
+
+
+
+
+ + +
+ + + +
+ + + +
+ + + +
+ +
+
+
+
+
+
+
+ +
+`; + exports[`single fields select field multiple choice formData 1`] = `
`; +exports[`single fields select field single choice enumDisabled using radio widget 1`] = ` + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ +
+`; + exports[`single fields select field single choice formData 1`] = `
`; +exports[`single fields select field multiple choice enumDisabled using checkboxes 1`] = ` + +
+
+
+
+
+ +
+
+`; + exports[`single fields select field multiple choice formData 1`] = `
`; +exports[`single fields select field single choice enumDisabled using radio widget 1`] = ` + +
+
+
+
+
+ +
+
+`; + exports[`single fields select field single choice formData 1`] = `
`; +exports[`single fields select field multiple choice enumDisabled using checkboxes 1`] = ` +.emotion-1 { + margin-bottom: 1px; +} + +.emotion-2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-2>*:not(style)~*:not(style) { + margin-top: 0.5rem; + -webkit-margin-end: 0px; + margin-inline-end: 0px; + margin-bottom: 0px; + -webkit-margin-start: 0px; + margin-inline-start: 0px; +} + +.emotion-3 { + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + vertical-align: top; + position: relative; +} + +.emotion-4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + vertical-align: top; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-5 { + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; +} + +.emotion-19 { + margin-top: 3px; +} + +.emotion-20 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + position: relative; + white-space: nowrap; + vertical-align: middle; + outline: 2px solid transparent; + outline-offset: 2px; + width: auto; +} + + +
+
+
+
+ + + + +
+
+
+
+
+ +
+
+`; + exports[`single fields select field multiple choice formData 1`] = ` .emotion-1 { margin-bottom: 1px; @@ -4390,6 +4749,246 @@ exports[`single fields select field single choice enumDisabled 1`] = ` `; +exports[`single fields select field single choice enumDisabled using radio widget 1`] = ` +.emotion-1 { + margin-bottom: 1px; +} + +.emotion-3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-3>*:not(style)~*:not(style) { + margin-top: 0.5rem; + -webkit-margin-end: 0px; + margin-inline-end: 0px; + margin-bottom: 0px; + -webkit-margin-start: 0px; + margin-inline-start: 0px; +} + +.emotion-4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + vertical-align: top; + cursor: pointer; +} + +.emotion-5 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-6 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; +} + +.emotion-10 { + margin-top: 3px; +} + +.emotion-11 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + position: relative; + white-space: nowrap; + vertical-align: middle; + outline: 2px solid transparent; + outline-offset: 2px; + width: auto; +} + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+`; + exports[`single fields select field single choice formData 1`] = ` .emotion-1 { margin-bottom: 1px; diff --git a/packages/core/test/__snapshots__/FormSnap.test.jsx.snap b/packages/core/test/__snapshots__/FormSnap.test.jsx.snap index 2f5dc571f7..2bc49762b8 100644 --- a/packages/core/test/__snapshots__/FormSnap.test.jsx.snap +++ b/packages/core/test/__snapshots__/FormSnap.test.jsx.snap @@ -1074,6 +1074,129 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` `; +exports[`single fields select field multiple choice enumDisabled using checkboxes 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+`; + exports[`single fields select field multiple choice formData 1`] = `
`; +exports[`single fields select field single choice enumDisabled using radio widget 1`] = ` + +
+
+
+ +
+
+ +
+
+
+
+ +
+
+`; + exports[`single fields select field single choice formData 1`] = `