diff --git a/packages/antd/src/widgets/SelectWidget/index.tsx b/packages/antd/src/widgets/SelectWidget/index.tsx index bf9d637cb1..13e5fa8262 100644 --- a/packages/antd/src/widgets/SelectWidget/index.tsx +++ b/packages/antd/src/widgets/SelectWidget/index.tsx @@ -69,10 +69,12 @@ export default function SelectWidget< name: id, }; + const showPlaceholderOption = !multiple && schema.default === undefined; + const selectOptions: DefaultOptionType[] | undefined = useMemo(() => { if (Array.isArray(enumOptions)) { const options = [...enumOptions]; - if (!multiple && schema.default === undefined) { + if (showPlaceholderOption) { options.unshift({ value: '', label: placeholder || '' }); } return options.map(({ value: optionValue, label: optionLabel }, index) => ({ diff --git a/packages/bootstrap-4/src/SelectWidget/SelectWidget.tsx b/packages/bootstrap-4/src/SelectWidget/SelectWidget.tsx index 8a92cee3f5..b3e0aa320d 100644 --- a/packages/bootstrap-4/src/SelectWidget/SelectWidget.tsx +++ b/packages/bootstrap-4/src/SelectWidget/SelectWidget.tsx @@ -45,6 +45,7 @@ export default function SelectWidget< } } const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple); + const showPlaceholderOption = !multiple && schema.default === undefined; return ( (id)} > - {!multiple && schema.default === undefined && } + {showPlaceholderOption && } {(enumOptions as any).map(({ value, label }: any, i: number) => { const disabled: any = Array.isArray(enumDisabled) && (enumDisabled as any).indexOf(value) != -1; return ( diff --git a/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx b/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx index 97c6f3041a..b9d168fdf6 100644 --- a/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx +++ b/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx @@ -61,11 +61,12 @@ export default function SelectWidget) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)); + const showPlaceholderOption = !multiple && schema.default === undefined; const _valueLabelMap: any = {}; const displayEnumOptions: OptionsOrGroups = useMemo(() => { if (Array.isArray(enumOptions)) { const options = [...enumOptions]; - if (!multiple && schema.default === undefined) { + if (showPlaceholderOption) { options.unshift({ value: '', label: placeholder || '' }); } return options.map((option: EnumOptionsType, index: number) => { diff --git a/packages/core/src/components/widgets/SelectWidget.tsx b/packages/core/src/components/widgets/SelectWidget.tsx index 2faae6051b..1bebfa371a 100644 --- a/packages/core/src/components/widgets/SelectWidget.tsx +++ b/packages/core/src/components/widgets/SelectWidget.tsx @@ -47,7 +47,7 @@ function SelectWidget(newValue, enumOptions, optEmptyVal)); }, - [onFocus, id, schema, multiple, options] + [onFocus, id, schema, multiple, enumOptions, optEmptyVal] ); const handleBlur = useCallback( @@ -55,7 +55,7 @@ function SelectWidget(newValue, enumOptions, optEmptyVal)); }, - [onBlur, id, schema, multiple, options] + [onBlur, id, schema, multiple, enumOptions, optEmptyVal] ); const handleChange = useCallback( @@ -63,10 +63,11 @@ function SelectWidget(newValue, enumOptions, optEmptyVal)); }, - [onChange, schema, multiple, options] + [onChange, schema, multiple, enumOptions, optEmptyVal] ); const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple); + const showPlaceholderOption = !multiple && schema.default === undefined; return (