fix rjsf-team#4197 for antd, chakra-ui, fluentui-rc, material-ui, mui…

…, semantic-ui
nickgros · Jul 8, 2024 · a950092 · a950092
1 parent 1338ded
commit a950092
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 32 deletions.
diff --git 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
@@ -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,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 (
     <Select
       autoFocus={autofocus}
@@ -81,16 +101,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}
     />
   );
 }
diff --git a/packages/antd/test/__snapshots__/Form.test.tsx.snap b/packages/antd/test/__snapshots__/Form.test.tsx.snap
@@ -3639,9 +3639,9 @@ exports[`single fields select field single choice formData 1`] = `
                   </span>
                   <span
                     className="ant-select-selection-item"
-                    title="bar"
+                    title="foo"
                   >
-                    bar
+                    foo
                   </span>
                 </div>
                 <span

diff --git a/packages/chakra-ui/src/SelectWidget/SelectWidget.tsx b/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 });
@@ -61,17 +62,23 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
     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 displayEnumOptions: OptionsOrGroups<any, any> = useMemo(() => {
+    if (Array.isArray(enumOptions)) {
+      if (!multiple && schema.default === undefined) {
+        enumOptions.unshift({ value: '', label: placeholder || '' });
+      }
+      return enumOptions.map((option: EnumOptionsType<S>, index: number) => {
         const { value, label } = option;
         _valueLabelMap[index] = label || String(value);
         return {
           label,
           value: String(index),
           isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
         };
-      })
-    : [];
+      });
+    }
+    return [];
+  }, [_valueLabelMap, enumDisabled, enumOptions, multiple, placeholder, schema.default]);
 
   const isMultiple = typeof multiple !== 'undefined' && multiple !== false && Boolean(enumOptions);
   const selectedIndex = enumOptionsIndexForValue<S>(value, enumOptions, isMultiple);

diff --git a/packages/fluentui-rc/src/SelectWidget/SelectWidget.tsx b/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;
 
@@ -81,6 +83,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>}
         {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
@@ -86,6 +86,7 @@ export default function SelectWidget<
       }}
       aria-describedby={ariaDescribedByIds<T>(id)}
     >
+      {!multiple && schema.default === undefined && <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
@@ -89,6 +89,7 @@ export default function SelectWidget<
       }}
       aria-describedby={ariaDescribedByIds<T>(id)}
     >
+      {!multiple && schema.default === undefined && <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
@@ -12,7 +12,7 @@ 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';
 
 /**
@@ -22,16 +22,25 @@ import { getSemanticProps } from '../util';
  * @returns {*}
  */
 function createDefaultValueOptionsForDropDown<S extends StrictRJSFSchema = RJSFSchema>(
+  schema: S,
   enumOptions?: EnumOptionsType<S>[],
-  enumDisabled?: UIOptionsType['enumDisabled']
+  enumDisabled?: UIOptionsType['enumDisabled'],
+  multiple?: boolean,
+  placeholder?: string
 ) {
   const disabledOptions = enumDisabled || [];
-  const options = map(enumOptions, ({ label, value }, index) => ({
-    disabled: disabledOptions.indexOf(value) !== -1,
-    key: label,
-    text: label,
-    value: String(index),
-  }));
+  const options: DropdownItemProps[] = [];
+  if (!multiple && schema.default === undefined) {
+    options.push({ value: '', text: placeholder || '' });
+  }
+  options.push(
+    ...map(enumOptions, ({ label, value }, index) => ({
+      disabled: disabledOptions.indexOf(value) !== -1,
+      key: label,
+      text: label,
+      value: String(index),
+    }))
+  );
   return options;
 }
 
@@ -61,6 +70,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 +86,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 dropdownOptions = createDefaultValueOptionsForDropDown<S>(
+    schema,
+    enumOptions,
+    enumDisabled,
+    multiple,
+    placeholder
+  );
   const _onChange = (_: SyntheticEvent<HTMLElement>, { value }: DropdownProps) =>
     onChange(enumOptionsValueForIndex<S>(value as string[], enumOptions, optEmptyVal));
   // eslint-disable-next-line no-shadow

diff --git a/packages/semantic-ui/test/__snapshots__/Form.test.tsx.snap b/packages/semantic-ui/test/__snapshots__/Form.test.tsx.snap
@@ -73,11 +73,27 @@ exports[`semantic-ui specific tests field with special semantic options 1`] = `
               <div
                 className="menu transition"
               >
+                <div
+                  aria-checked={true}
+                  aria-selected={true}
+                  className="active selected item"
+                  onClick={[Function]}
+                  role="option"
+                  style={
+                    {
+                      "pointerEvents": "all",
+                    }
+                  }
+                >
+                  <span
+                    className="text"
+                  />
+                </div>
                 <div
                   aria-checked={false}
                   aria-disabled={false}
-                  aria-selected={true}
-                  className="selected item"
+                  aria-selected={false}
+                  className="item"
                   onClick={[Function]}
                   role="option"
                   style={
@@ -1278,11 +1294,27 @@ exports[`single fields select field 1`] = `
           <div
             className="menu transition"
           >
+            <div
+              aria-checked={true}
+              aria-selected={true}
+              className="active selected item"
+              onClick={[Function]}
+              role="option"
+              style={
+                {
+                  "pointerEvents": "all",
+                }
+              }
+            >
+              <span
+                className="text"
+              />
+            </div>
             <div
               aria-checked={false}
               aria-disabled={false}
-              aria-selected={true}
-              className="selected item"
+              aria-selected={false}
+              className="item"
               onClick={[Function]}
               role="option"
               style={
@@ -2045,11 +2077,27 @@ exports[`single fields select field single choice enumDisabled 1`] = `
           <div
             className="menu transition"
           >
+            <div
+              aria-checked={true}
+              aria-selected={true}
+              className="active selected item"
+              onClick={[Function]}
+              role="option"
+              style={
+                {
+                  "pointerEvents": "all",
+                }
+              }
+            >
+              <span
+                className="text"
+              />
+            </div>
             <div
               aria-checked={false}
               aria-disabled={false}
-              aria-selected={true}
-              className="selected item"
+              aria-selected={false}
+              className="item"
               onClick={[Function]}
               role="option"
               style={
@@ -2243,6 +2291,22 @@ exports[`single fields select field single choice formData 1`] = `
           <div
             className="menu transition"
           >
+            <div
+              aria-checked={false}
+              aria-selected={false}
+              className="item"
+              onClick={[Function]}
+              role="option"
+              style={
+                {
+                  "pointerEvents": "all",
+                }
+              }
+            >
+              <span
+                className="text"
+              />
+            </div>
             <div
               aria-checked={false}
               aria-disabled={false}