Clarify by creating showPlaceholderOption variable in all changed t…

…hemes
rjsf-team · Jul 8, 2024 · 6c4b39b · 6c4b39b
1 parent 89621ac
commit 6c4b39b
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 16 deletions.
diff --git 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
@@ -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 (

diff --git a/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx b/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx
@@ -61,11 +61,12 @@ 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 showPlaceholderOption = !multiple && schema.default === undefined;
   const _valueLabelMap: any = {};
   const displayEnumOptions: OptionsOrGroups<any, any> = 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<S>, index: number) => {

diff --git a/packages/core/src/components/widgets/SelectWidget.tsx b/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;

diff --git a/packages/fluentui-rc/src/SelectWidget/SelectWidget.tsx b/packages/fluentui-rc/src/SelectWidget/SelectWidget.tsx
@@ -62,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
@@ -83,7 +84,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
         selectedOptions={selectedIndexesAsArray}
         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;

diff --git a/packages/material-ui/src/SelectWidget/SelectWidget.tsx b/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,7 +87,7 @@ export default function SelectWidget<
       }}
       aria-describedby={ariaDescribedByIds<T>(id)}
     >
-      {!multiple && schema.default === undefined && <MenuItem value=''>{placeholder}</MenuItem>}
+      {showPlaceholderOption && <MenuItem value=''>{placeholder}</MenuItem>}
       {Array.isArray(enumOptions) &&
         enumOptions.map(({ value, label }, i: number) => {
           const disabled: boolean = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;

diff --git a/packages/mui/src/SelectWidget/SelectWidget.tsx b/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,7 +90,7 @@ export default function SelectWidget<
       }}
       aria-describedby={ariaDescribedByIds<T>(id)}
     >
-      {!multiple && schema.default === undefined && <MenuItem value=''>{placeholder}</MenuItem>}
+      {showPlaceholderOption && <MenuItem value=''>{placeholder}</MenuItem>}
       {Array.isArray(enumOptions) &&
         enumOptions.map(({ value, label }, i: number) => {
           const disabled: boolean = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;

diff --git a/packages/semantic-ui/src/SelectWidget/SelectWidget.tsx b/packages/semantic-ui/src/SelectWidget/SelectWidget.tsx
@@ -17,20 +17,21 @@ 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>(
-  schema: S,
   enumOptions?: EnumOptionsType<S>[],
   enumDisabled?: UIOptionsType['enumDisabled'],
-  multiple?: boolean,
+  showPlaceholderOption?: boolean,
   placeholder?: string
 ) {
   const disabledOptions = enumDisabled || [];
   const options: DropdownItemProps[] = [];
-  if (!multiple && schema.default === undefined) {
+  if (showPlaceholderOption) {
     options.push({ value: '', text: placeholder || '' });
   }
   options.push(
@@ -86,11 +87,11 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   });
   const { enumDisabled, enumOptions, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : '';
+  const showPlaceholderOption = !multiple && schema.default === undefined;
   const dropdownOptions = createDefaultValueOptionsForDropDown<S>(
-    schema,
     enumOptions,
     enumDisabled,
-    multiple,
+    showPlaceholderOption,
     placeholder
   );
   const _onChange = (_: SyntheticEvent<HTMLElement>, { value }: DropdownProps) =>