Fix: Chakra-ui SelectWidget show proper selection

Fixes: rjsf-team#3422 by using the selected value for the single selection
- Updated the `@rjsf/chakra-ui` `SelectWidget` to properly use the selected value rather than a hard-coded `0` value
- Updated the `CHANGELOG.md` accordingly

CHANGELOG.md

@@ -15,6 +15,11 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 5.0.3
+
+## @rjsf/chakra-ui
+- Fixed the `SelectWidget` to allow the proper display of the selected value, fixing [#3422](https://github.com/rjsf-team/react-jsonschema-form/issues/3422)
+
 # 5.0.2
 
 ## @rjsf/utils

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

@@ -3,6 +3,7 @@ import { FormControl, FormLabel } from "@chakra-ui/react";
 import {
   ariaDescribedByIds,
   EnumOptionsType,
+  enumOptionsIndexForValue,
   enumOptionsValueForIndex,
   FormContextType,
   RJSFSchema,
@@ -70,7 +71,7 @@ export default function SelectWidget<
   )
     ? enumOptions.map((option: EnumOptionsType<S>, index: number) => {
         const { value, label } = option;
-        _valueLabelMap[index] = label;
+        _valueLabelMap[index] = label || String(value);
         return {
           label,
           value: String(index),
@@ -81,16 +82,21 @@ export default function SelectWidget<
     : [];
 
   const isMultiple = typeof multiple !== "undefined" && Boolean(enumOptions);
+  const selectedIndex = enumOptionsIndexForValue<S>(
+    value,
+    enumOptions,
+    isMultiple
+  );
   const formValue: any = isMultiple
-    ? (value || []).map((v: any, index: number) => {
+    ? (selectedIndex as string[] || []).map((i: string) => {
         return {
-          label: _valueLabelMap[index] || v,
-          value: index,
+          label: _valueLabelMap[i],
+          value: i,
         };
       })
     : {
-        label: _valueLabelMap[0] || value || "",
-        value: 0,
+        label: _valueLabelMap[selectedIndex as string] || "",
+        selectedIndex,
       };
 
   return (

packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap

@@ -2503,7 +2503,7 @@ exports[`single fields select field 1`] = `
               <div
                 className=" emotion-7"
               >
-                foo
+                
               </div>
               <div
                 className=" emotion-8"
@@ -2560,7 +2560,6 @@ exports[`single fields select field 1`] = `
           <input
             name="root"
             type="hidden"
-            value={0}
           />
         </div>
       </div>
@@ -3646,12 +3645,12 @@ exports[`single fields select field multiple choice formData 1`] = `
             <input
               name="root"
               type="hidden"
-              value={0}
+              value="0"
             />
             <input
               name="root"
               type="hidden"
-              value={1}
+              value="1"
             />
           </div>
         </div>
@@ -4238,7 +4237,7 @@ exports[`single fields select field single choice enumDisabled 1`] = `
               <div
                 className=" emotion-7"
               >
-                foo
+                
               </div>
               <div
                 className=" emotion-8"
@@ -4295,7 +4294,6 @@ exports[`single fields select field single choice enumDisabled 1`] = `
           <input
             name="root"
             type="hidden"
-            value={0}
           />
         </div>
       </div>
@@ -4557,7 +4555,7 @@ exports[`single fields select field single choice formData 1`] = `
               <div
                 className=" emotion-7"
               >
-                foo
+                bar
               </div>
               <div
                 className=" emotion-8"
@@ -4614,7 +4612,6 @@ exports[`single fields select field single choice formData 1`] = `
           <input
             name="root"
             type="hidden"
-            value={0}
           />
         </div>
       </div>