Fix #4197 in various themes by showing empty option in SelectWidget when appropriate

CHANGELOG.md

@@ -18,10 +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:/rjsf-team/react-jsonschema-form/issues/4197)
+
+## @rjsf/chakra-ui
+
+- SelectWidget now displays an empty option when appropriate, fixing [#4197](https:/rjsf-team/react-jsonschema-form/issues/4197)
+
 ## @rjsf/core
 
 - Removed `.only` on tests that was accidentally added in `5.19.0`
 
+## @rjsf/fluentui-rc
+
+- SelectWidget now displays an empty option when appropriate, fixing [#4197](https:/rjsf-team/react-jsonschema-form/issues/4197)
+
+## @rjsf/material-ui
+
+- SelectWidget now displays an empty option when appropriate, fixing [#4197](https:/rjsf-team/react-jsonschema-form/issues/4197)
+
+## @rjsf/mui
+
+- SelectWidget now displays an empty option when appropriate, fixing [#4197](https:/rjsf-team/react-jsonschema-form/issues/4197)
+
+## @rjsf/semantic-ui
+
+- SelectWidget now displays an empty option when appropriate, fixing [#4197](https:/rjsf-team/react-jsonschema-form/issues/4197)
+
 # 5.19.1
 
 ## Dev / docs / playground
@@ -92,6 +116,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:/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:/rjsf-team/react-jsonschema-form/pull/4212]
+- Added support for `default` values in `additionalProperties` in [#4199](https:/rjsf-team/react-jsonschema-form/issues/4199), fixing [#3195](https:/rjsf-team/react-jsonschema-form/issues/3915)
 
 ## @rjsf/fluent-ui
 

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<T, S, F>) {
  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
 
@@ -65,6 +68,26 @@ export default function SelectWidget<
  const extraProps = {
  name: id,
  };
+
+ const showPlaceholderOption = !multiple && schema.default === undefined;
+
+ const selectOptions: DefaultOptionType[] | undefined = useMemo(() => {
+ if (Array.isArray(enumOptions)) {
+ const options: DefaultOptionType[] = enumOptions.map(({ value: optionValue, label: optionLabel }, index) => ({
+ disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
+ key: String(index),
+ value: String(index),
+ label: optionLabel,
+ }));
+
+ if (showPlaceholderOption) {
+ options.unshift({ value: '', label: placeholder || '' });
+ }
+ return options;
+ }
+ return undefined;
+ }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
+
  return (
  <Select
  autoFocus={autofocus}
@@ -81,16 +104,7 @@ export default function SelectWidget<
  {...extraProps}
  filterOption={filterOption}
  aria-describedby={ariaDescribedByIds<T>(id)}
- options={
- Array.isArray(enumOptions)
- ? enumOptions.map(({ value: optionValue, label: optionLabel }, index) => ({
- disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
- key: String(index),
- value: String(index),
- label: optionLabel,
- }))
- : undefined
- }
+ options={selectOptions}
  />
  );
 }

packages/bootstrap-4/src/SelectWidget/SelectWidget.tsx

@@ -45,6 +45,7 @@ export default function SelectWidget<
  }
  }
  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+ const showPlaceholderOption = !multiple && schema.default === undefined;
 
  return (
  <Form.Control
@@ -78,7 +79,7 @@ export default function SelectWidget<
  }}
  aria-describedby={ariaDescribedByIds<T>(id)}
  >
- {!multiple && schema.default === undefined && <option value=''>{placeholder}</option>}
+ {showPlaceholderOption && <option value=''>{placeholder}</option>}
  {(enumOptions as any).map(({ value, label }: any, i: number) => {
  const disabled: any = Array.isArray(enumDisabled) && (enumDisabled as any).indexOf(value) != -1;
  return (

packages/chakra-ui/src/SelectWidget/SelectWidget.tsx

@@ -1,4 +1,4 @@
-import { FocusEvent } from 'react';
+import { FocusEvent, useMemo } from 'react';
 import { FormControl, FormLabel } from '@chakra-ui/react';
 import {
  ariaDescribedByIds,
@@ -34,6 +34,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
  onFocus,
  rawErrors = [],
  uiSchema,
+ schema,
  } = props;
  const { enumOptions, enumDisabled, emptyValue } = options;
  const chakraProps = getChakra({ uiSchema });
@@ -60,30 +61,41 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
  onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
- const _valueLabelMap: any = {};
- const displayEnumOptions: OptionsOrGroups<any, any> = Array.isArray(enumOptions)
- ? enumOptions.map((option: EnumOptionsType<S>, index: number) => {
+ const showPlaceholderOption = !multiple && schema.default === undefined;
+ const { valueLabelMap, displayEnumOptions } = useMemo((): {
+ valueLabelMap: Record<string | number, string>;
+ displayEnumOptions: OptionsOrGroups<any, any>;
+ } => {
+ const valueLabelMap: Record<string | number, string> = {};
+ let displayEnumOptions: OptionsOrGroups<any, any> = [];
+ if (Array.isArray(enumOptions)) {
+ displayEnumOptions = enumOptions.map((option: EnumOptionsType<S>, index: number) => {
  const { value, label } = option;
- _valueLabelMap[index] = label || String(value);
+ valueLabelMap[index] = label || String(value);
  return {
  label,
  value: String(index),
  isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
  };
- })
- : [];
+ });
+ if (showPlaceholderOption) {
+ (displayEnumOptions as any[]).unshift({ value: '', label: placeholder || '' });
+ }
+ }
+ return { valueLabelMap: valueLabelMap, displayEnumOptions: displayEnumOptions };
+ }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
 
  const isMultiple = typeof multiple !== 'undefined' && multiple !== false && Boolean(enumOptions);
  const selectedIndex = enumOptionsIndexForValue<S>(value, enumOptions, isMultiple);
  const formValue: any = isMultiple
  ? ((selectedIndex as string[]) || []).map((i: string) => {
  return {
- label: _valueLabelMap[i],
+ label: valueLabelMap[i],
  value: i,
  };
  })
  : {
- label: _valueLabelMap[selectedIndex as string] || '',
+ label: valueLabelMap[selectedIndex as string] || '',
  selectedIndex,
  };
 

packages/core/src/components/widgets/SelectWidget.tsx

@@ -47,26 +47,27 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
  const newValue = getValue(event, multiple);
  return onFocus(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
  },
- [onFocus, id, schema, multiple, options]
+ [onFocus, id, schema, multiple, enumOptions, optEmptyVal]
  );
 
  const handleBlur = useCallback(
  (event: FocusEvent<HTMLSelectElement>) => {
  const newValue = getValue(event, multiple);
  return onBlur(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
  },
- [onBlur, id, schema, multiple, options]
+ [onBlur, id, schema, multiple, enumOptions, optEmptyVal]
  );
 
  const handleChange = useCallback(
  (event: ChangeEvent<HTMLSelectElement>) => {
  const newValue = getValue(event, multiple);
  return onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
  },
- [onChange, schema, multiple, options]
+ [onChange, schema, multiple, enumOptions, optEmptyVal]
  );
 
  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+ const showPlaceholderOption = !multiple && schema.default === undefined;
 
  return (
  <select
@@ -83,7 +84,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
  onChange={handleChange}
  aria-describedby={ariaDescribedByIds<T>(id)}
  >
- {!multiple && schema.default === undefined && <option value=''>{placeholder}</option>}
+ {showPlaceholderOption && <option value=''>{placeholder}</option>}
  {Array.isArray(enumOptions) &&
  enumOptions.map(({ value, label }, i) => {
  const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;

packages/fluentui-rc/src/SelectWidget/SelectWidget.tsx

@@ -38,6 +38,8 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
  onChange,
  onBlur,
  onFocus,
+ schema,
+ placeholder,
 }: WidgetProps<T, S, F>) {
  const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
 
@@ -60,6 +62,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
  const newValue = getValue(data, multiple);
  return onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
  };
+ const showPlaceholderOption = !multiple && schema.default === undefined;
 
  return (
  <Field
@@ -81,6 +84,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
  selectedOptions={selectedIndexesAsArray}
  aria-describedby={ariaDescribedByIds<T>(id)}
  >
+ {showPlaceholderOption && <Option value=''>{placeholder || ''}</Option>}
  {Array.isArray(enumOptions) &&
  enumOptions.map(({ value, label }, i) => {
  const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;

packages/material-ui/src/SelectWidget/SelectWidget.tsx

@@ -59,6 +59,7 @@ export default function SelectWidget<
  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
  onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, optEmptyVal));
  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+ const showPlaceholderOption = !multiple && schema.default === undefined;
 
  return (
  <TextField
@@ -86,6 +87,7 @@ export default function SelectWidget<
  }}
  aria-describedby={ariaDescribedByIds<T>(id)}
  >
+ {showPlaceholderOption && <MenuItem value=''>{placeholder}</MenuItem>}
  {Array.isArray(enumOptions) &&
  enumOptions.map(({ value, label }, i: number) => {
  const disabled: boolean = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;

packages/mui/src/SelectWidget/SelectWidget.tsx

@@ -61,6 +61,7 @@ export default function SelectWidget<
  onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, optEmptyVal));
  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
  const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps;
+ const showPlaceholderOption = !multiple && schema.default === undefined;
 
  return (
  <TextField
@@ -89,6 +90,7 @@ export default function SelectWidget<
  }}
  aria-describedby={ariaDescribedByIds<T>(id)}
  >
+ {showPlaceholderOption && <MenuItem value=''>{placeholder}</MenuItem>}
  {Array.isArray(enumOptions) &&
  enumOptions.map(({ value, label }, i: number) => {
  const disabled: boolean = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;

packages/semantic-ui/src/SelectWidget/SelectWidget.tsx

@@ -12,26 +12,33 @@ import {
  UIOptionsType,
 } from '@rjsf/utils';
 import map from 'lodash/map';
-import { Form, DropdownProps } from 'semantic-ui-react';
+import { Form, DropdownProps, DropdownItemProps } from 'semantic-ui-react';
 import { getSemanticProps } from '../util';
 
 /**
  * Returns and creates an array format required for semantic drop down
- * @param {array} enumOptions- array of items for the dropdown
+ * @param {array} enumOptions - array of items for the dropdown
  * @param {array} enumDisabled - array of enum option values to disable
+ * @param {boolean} showPlaceholderOption - whether to show a placeholder option
+ * @param {string} placeholder - placeholder option label
  * @returns {*}
  */
 function createDefaultValueOptionsForDropDown<S extends StrictRJSFSchema = RJSFSchema>(
  enumOptions?: EnumOptionsType<S>[],
- enumDisabled?: UIOptionsType['enumDisabled']
+ enumDisabled?: UIOptionsType['enumDisabled'],
+ showPlaceholderOption?: boolean,
+ placeholder?: string
 ) {
  const disabledOptions = enumDisabled || [];
- const options = map(enumOptions, ({ label, value }, index) => ({
+ const options: DropdownItemProps[] = map(enumOptions, ({ label, value }, index) => ({
  disabled: disabledOptions.indexOf(value) !== -1,
  key: label,
  text: label,
  value: String(index),
  }));
+ if (showPlaceholderOption) {
+ options.unshift({ value: '', text: placeholder || '' });
+ }
  return options;
 }
 
@@ -61,6 +68,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
  onBlur,
  onFocus,
  rawErrors = [],
+ schema,
  } = props;
  const semanticProps = getSemanticProps<T, S, F>({
  uiSchema,
@@ -76,7 +84,13 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
  });
  const { enumDisabled, enumOptions, emptyValue: optEmptyVal } = options;
  const emptyValue = multiple ? [] : '';
- const dropdownOptions = createDefaultValueOptionsForDropDown<S>(enumOptions, enumDisabled);
+ const showPlaceholderOption = !multiple && schema.default === undefined;
+ const dropdownOptions = createDefaultValueOptionsForDropDown<S>(
+ enumOptions,
+ enumDisabled,
+ showPlaceholderOption,
+ placeholder
+ );
  const _onChange = (_: SyntheticEvent<HTMLElement>, { value }: DropdownProps) =>
  onChange(enumOptionsValueForIndex<S>(value as string[], enumOptions, optEmptyVal));
  // eslint-disable-next-line no-shadow