PropertyFieldCollectionData color FieldType renders prior rows color

Category

• [ ] Enhancement
• [x] Bug
• [ ] Question

Version

Please specify what version of the library you are using: [v3.13.0]

Expected / Desired Behavior / Question

When using the PropertyFieldCollectionData and including a CustomCollectionFieldType.color field, you would expect that when clicking to add a new row that the color field in the new row would be the default/initial color value (just like it was for the first row in the collection).

Observed Behavior

After filling out the fields in a row, including selecting a color, when you click on the new/plus button the color field will show the same color you selected in the prior row even though the other fields are "reset" to their default/blank value. This same problem occurs when you specify the defaultValue property as well.

Steps to Reproduce

Add a PropertyFieldCollectionData with a color FieldType, edit the web part in the browser, fill out the row and click the add/plus button. You'll see the new row that appears has the color field show the same color as the prior row.

PropertyFieldCollectionData("categories", {
  key: "categories",
  label: "Categories / Legend",
  panelHeader: "Add any categories that you want",
  manageBtnLabel: "Configure Categories",
  value: this.properties.categories,
  enableSorting: true,
  fields: [
    {
      id: "Name",
      title: "Category Name",
      type: CustomCollectionFieldType.string,
      required: true,
    },
    {
      id: "Background",
      title: "Background",
      type: CustomCollectionFieldType.color,
      //defaultValue: '#97b0f8',
      required: true
    }
  ]
})

Briefly looking at the CollectionColorField.tsx code file I didn't see anything that would be causing this behavior.

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.