"Invalid value" in property inside App Builder with custom Lightning web component

Question

I'm building a component where I want my user to select the pricebook he wants from a picklist. By following the guide on how to build those dynamic properties, I ended up with the following Apex class code:

global class ComparisonTablePricebooks extends VisualEditor.DynamicPicklist {

    global override VisualEditor.DataRow getDefaultValue () {
        Pricebook2 standardPricebook = [SELECT Id, Name FROM Pricebook2 WHERE IsStandard = TRUE];
        return new VisualEditor.DataRow(standardPricebook.Name, standardPricebook.Id);
    }

    global override VisualEditor.DynamicPicklistRows getValues () {
        List<Pricebook2> pricebooks = [SELECT Id, Name FROM Pricebook2];
        VisualEditor.DynamicPicklistRows values = new VisualEditor.DynamicPicklistRows();
        Boolean valueSelected = false;
        for (Pricebook2 pb : pricebooks) {
            values.addRow(new VisualEditor.DataRow(pb.Name, pb.Id));
        }
        return values;
    }
}

And also my component's js-meta.xml file is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ComparisonTable">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property
                name="pricebookId"
                label="Pricebook"
                type="String"
                datasource="apex://ComparisonTablePricebooks"
            />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Given this current configuration, whenever I open the editor on my org, I get two pricebook options showing up on the editor, as they should, but when I select either of them, I get a small error below the property, saying "Invalid value", like this:

Invalid value [{value=01s0m000000yovRAAQ}]

Am I missing something here?

Answer 1

Although the documentation for VisualEditor.DataRow specifies a generic Object as the value parameter, for it to show on the editor you should transform what you've got into a String.

For example, in:

return new VisualEditor.DataRow(
    standardPricebook.Name,
    String.valueOf(standardPricebook.Id) // notice the conversion to String
);