Properly assign label prop for MultiSelect ArrayField (#2459)

* Assign name prop as widget label

* Use title instead of name

* Test label prop for custom MultiSelect widgets

* Update for consistency with renderNormalArray()

* fix for consistency

Co-authored-by: Ashwin Ramaswami <aramaswamis@gmail.com>

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

@@ -539,17 +539,18 @@ class ArrayField extends Component {
       disabled,
       readonly,
       required,
-      label,
       placeholder,
       autofocus,
       onBlur,
       onFocus,
       registry = getDefaultRegistry(),
       rawErrors,
+      name,
     } = this.props;
     const items = this.props.formData;
     const { widgets, rootSchema, formContext } = registry;
     const itemsSchema = retrieveSchema(schema.items, rootSchema, formData);
+    const title = schema.title || name;
     const enumOptions = optionsList(itemsSchema);
     const { widget = "select", ...options } = {
       ...getUiOptions(uiSchema),
@@ -570,7 +571,7 @@ class ArrayField extends Component {
         disabled={disabled}
         readonly={readonly}
         required={required}
-        label={label}
+        label={title}
         placeholder={placeholder}
         formContext={formContext}
         autofocus={autofocus}

packages/core/test/ArrayField_test.js

@@ -1190,6 +1190,20 @@ describe("ArrayField", () => {
           "should NOT have duplicate items (items ## 1 and 0 are identical)"
         );
       });
+
+      it("should pass a label as prop to custom widgets", () => {
+        const LabelComponent = ({ label }) => <div id="test">{label}</div>;
+        const { node } = createFormComponent({
+          schema,
+          widgets: {
+            SelectWidget: LabelComponent,
+          },
+        });
+
+        const matches = node.querySelectorAll("#test");
+        expect(matches).to.have.length.of(1);
+        expect(matches[0].textContent).to.eql(schema.title);
+      });
     });
 
     describe("CheckboxesWidget", () => {