Fix cases where placeholder option was accidentally given an index

Author: nickgros

packages/antd/src/widgets/SelectWidget/index.tsx

@@ -73,19 +73,20 @@ export default function SelectWidget<
 
   const selectOptions: DefaultOptionType[] | undefined = useMemo(() => {
     if (Array.isArray(enumOptions)) {
-      const options = [...enumOptions];
-      if (showPlaceholderOption) {
-        options.unshift({ value: '', label: placeholder || '' });
-      }
-      return options.map(({ value: optionValue, label: optionLabel }, index) => ({
+      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, multiple, placeholder, schema.default]);
+  }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
 
   return (
     <Select

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="foo"
+                    title="bar"
                   >
-                    foo
+                    bar
                   </span>
                 </div>
                 <span

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

@@ -62,37 +62,40 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
     onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
   const showPlaceholderOption = !multiple && schema.default === undefined;
-  const _valueLabelMap: any = {};
-  const displayEnumOptions: OptionsOrGroups<any, any> = useMemo(() => {
+  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)) {
-      const options = [...enumOptions];
-      if (showPlaceholderOption) {
-        options.unshift({ value: '', label: placeholder || '' });
-      }
-      return options.map((option: EnumOptionsType<S>, index: number) => {
+      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, enumDisabled, enumOptions, multiple, placeholder, schema.default]);
+    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/chakra-ui/test/__snapshots__/Form.test.tsx.snap

@@ -5230,7 +5230,7 @@ exports[`single fields select field single choice formData 1`] = `
               <div
                 className=" emotion-7"
               >
-                foo
+                bar
               </div>
               <div
                 className=" emotion-8"

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

@@ -30,18 +30,15 @@ function createDefaultValueOptionsForDropDown<S extends StrictRJSFSchema = RJSFS
   placeholder?: string
 ) {
   const disabledOptions = enumDisabled || [];
-  const options: DropdownItemProps[] = [];
+  const options: DropdownItemProps[] = map(enumOptions, ({ label, value }, index) => ({
+    disabled: disabledOptions.indexOf(value) !== -1,
+    key: label,
+    text: label,
+    value: String(index),
+  }));
   if (showPlaceholderOption) {
-    options.push({ value: '', text: placeholder || '' });
+    options.unshift({ value: '', text: placeholder || '' });
   }
-  options.push(
-    ...map(enumOptions, ({ label, value }, index) => ({
-      disabled: disabledOptions.indexOf(value) !== -1,
-      key: label,
-      text: label,
-      value: String(index),
-    }))
-  );
   return options;
 }