diff --git a/CHANGELOG.md b/CHANGELOG.md index 428e9c6809..2412e77dde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,9 +18,34 @@ should change the heading of the (upcoming) version to include a major version b # 5.19.2 +## @rjsf/antd + +- SelectWidget now displays an empty option when appropriate, fixing [#4197](https://github.com/rjsf-team/react-jsonschema-form/issues/4197) + +## @rjsf/chakra-ui + +- SelectWidget now displays an empty option when appropriate, fixing [#4197](https://github.com/rjsf-team/react-jsonschema-form/issues/4197) + ## @rjsf/core - Removed `.only` on tests that was accidentally added in `5.19.0` +- Added support for `default` values in `additionalProperties` in [#4199](https://github.com/rjsf-team/react-jsonschema-form/issues/4199), fixing [#3195](https://github.com/rjsf-team/react-jsonschema-form/issues/3915) + +## @rjsf/fluentui-rc + +- SelectWidget now displays an empty option when appropriate, fixing [#4197](https://github.com/rjsf-team/react-jsonschema-form/issues/4197) + +## @rjsf/material-ui + +- SelectWidget now displays an empty option when appropriate, fixing [#4197](https://github.com/rjsf-team/react-jsonschema-form/issues/4197) + +## @rjsf/mui + +- SelectWidget now displays an empty option when appropriate, fixing [#4197](https://github.com/rjsf-team/react-jsonschema-form/issues/4197) + +## @rjsf/semantic-ui + +- SelectWidget now displays an empty option when appropriate, fixing [#4197](https://github.com/rjsf-team/react-jsonschema-form/issues/4197) # 5.19.1 diff --git a/packages/antd/src/widgets/SelectWidget/index.tsx b/packages/antd/src/widgets/SelectWidget/index.tsx index 2f6937b773..cfb7e5c85a 100644 --- a/packages/antd/src/widgets/SelectWidget/index.tsx +++ b/packages/antd/src/widgets/SelectWidget/index.tsx @@ -10,6 +10,8 @@ import { WidgetProps, } from '@rjsf/utils'; import isString from 'lodash/isString'; +import { DefaultOptionType } from 'antd/es/select'; +import { useMemo } from 'react'; const SELECT_STYLE = { width: '100%', @@ -37,6 +39,7 @@ export default function SelectWidget< placeholder, readonly, value, + schema, }: WidgetProps) { const { readonlyAsDisabled = true } = formContext as GenericObjectType; @@ -65,6 +68,23 @@ export default function SelectWidget< const extraProps = { name: id, }; + + const selectOptions: DefaultOptionType[] | undefined = useMemo(() => { + if (Array.isArray(enumOptions)) { + if (!multiple && schema.default === undefined) { + enumOptions.unshift({ value: '', label: placeholder || '' }); + } + + return enumOptions.map(({ value: optionValue, label: optionLabel }, index) => ({ + disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1, + key: String(index), + value: String(index), + label: optionLabel, + })); + } + return undefined; + }, [enumDisabled, enumOptions, multiple, placeholder, schema.default]); + return (