fix: ArrayAsMultiSelect should pass items UI schema when retrieving enumOptions (#4955) (#4961)

Author: nickgros

CHANGELOG.md

@@ -15,6 +15,13 @@ 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.
 
 -->
+
+# 6.3.2
+
+## @rjsf/core
+
+- Updated multi-select ArrayFields to properly use the `items` uiSchema for enumerated options, fixing [#4955](https://github.com/rjsf-team/react-jsonschema-form/issues/4955)
+
 # 6.3.1
 
 ## Dev / docs / playground
@@ -80,7 +87,7 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/mui
 
-- Updated `BaseInputTemplate` to properly handle `slotProps` and `InputProps` (deprecated by MUI) with existing `endAdornment`s when the `allowClearTextInputs` flag is true, fixing [#4938](https://github.com/rjsf-team/react-jsonschema-form/issues/4938) 
+- Updated `BaseInputTemplate` to properly handle `slotProps` and `InputProps` (deprecated by MUI) with existing `endAdornment`s when the `allowClearTextInputs` flag is true, fixing [#4938](https://github.com/rjsf-team/react-jsonschema-form/issues/4938)
 
 ## Dev / docs / playground
 

packages/core/src/components/fields/ArrayField.tsx

@@ -199,7 +199,8 @@ function ArrayAsMultiSelect<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   const { widgets, schemaUtils, globalFormOptions, globalUiOptions } = registry;
   const itemsSchema = schemaUtils.retrieveSchema(schema.items as S, items);
-  const enumOptions = optionsList<T[], S, F>(itemsSchema, uiSchema);
+  const itemsUiSchema = (uiSchema?.items ?? {}) as UiSchema<T[], S, F>;
+  const enumOptions = optionsList<T[], S, F>(itemsSchema, itemsUiSchema);
   const { widget = 'select', title: uiTitle, ...options } = getUiOptions<T[], S, F>(uiSchema, globalUiOptions);
   const Widget = getWidget<T[], S, F>(schema, widget, widgets);
   const label = uiTitle ?? schema.title ?? name;

packages/core/test/ArrayField.test.tsx

@@ -1345,6 +1345,30 @@ describe('ArrayField', () => {
 
         expect(node.querySelector("option[value='1']")).toBeDisabled(); // use index
       });
+
+      it('should use ui:enumNames from items uiSchema as option labels', () => {
+        const enumSchema: RJSFSchema = {
+          title: 'Demo',
+          type: 'array',
+          items: {
+            type: 'integer',
+            enum: [1, 2, 3],
+          },
+          uniqueItems: true,
+        };
+        const enumUiSchema: UiSchema = {
+          items: {
+            'ui:enumNames': ['A', 'B', 'C'],
+          },
+        };
+        const { node } = createFormComponent({ schema: enumSchema, uiSchema: enumUiSchema });
+
+        const options = node.querySelectorAll('select option');
+        expect(options).toHaveLength(3);
+        expect(options[0]).toHaveTextContent('A');
+        expect(options[1]).toHaveTextContent('B');
+        expect(options[2]).toHaveTextContent('C');
+      });
     });
 
     describe('CheckboxesWidget', () => {