ListItemPicker: DefaultSelectedItems for ListItemPicker not working with Dynamic Data

Bug: defaultSelectedItems for ListItemPicker not working with React dynamic data

I’ve installed @pnp/spfx-controls-react of version 1.16.0. I am facing challenge in setting default selected item for ListitemPicker dynamically. If we set defaultSelectedItems using any static data it is working properly. However if we try to set defaultSelectedItems dynamically using react state variable then it does not set default selected items.

Expected / Desired Behavior / Question

We should be able to set defaultSelectedItems dynamically using react state or any other way.

Observed Behavior

If I set static DefaultSelectedItem for ListItemPicker it works properly.

<ListItemPicker listId='653741e7-84c2-4d78-81a6-ac77dcc6bd24'  
                                            columnInternalName='Title'  
                                            keyColumnInternalName='Id'  
                                            itemLimit={1}  
                                            onSelectedItem={this.onSelectedItem}  
                                            context={this.props.context}   
                                            suggestionsHeaderText = "Please select Location"   
                                            defaultSelectedItems={[{key: 12297, name: "A1R1C1S1"}]} 

Steps to Reproduce

If we trying to set DefaultSelectedItem for ListItemPicker dynamically then it does not work. Please find following example in which I am trying to set default selected items using react state.

  public componentDidMount() {
    sp.setup({
        spfxContext: this.props.context
    });
    this.GetLookupData("Record Location", "Title").then(ChoiceItemCollection => {
        this.setState({
            RecordLocations: ChoiceItemCollection,
            SelectedRecordLocation: ChoiceItemCollection.filter(item => item.key === 12297),
        });
    });

}
  public render(): React.ReactElement < IListPickerProps > {
  
    return(
      <div className = { styles.listPicker } >
            <div className={styles.container}>
                <div className={styles.row}>
                    <div className={styles.column}>

                        <ListItemPicker listId='653741e7-84c2-4d78-81a6-ac77dcc6bd24'
                            columnInternalName='Title'
                            keyColumnInternalName='Id'
                            itemLimit={1}
                            onSelectedItem={this.onSelectedItem}
                            context={this.props.context}
                            suggestionsHeaderText="Please select Location"
                            defaultSelectedItems={this.state.SelectedRecordLocation}

                        />
                    </div>
                </div>
            </div>
      </div>
    );
  }

  private GetLookupData(SPListName: string, SPFieldName: string): Promise < any > {
    let spfields = [SPFieldName, "Id"];

    return sp.web.lists.getByTitle(SPListName).items.select(...spfields).top(5000)
        .get()
        .then((data) => {

            if (data && data.length > 0) {
                let ChoicesCollection: any[] = [];
                data.forEach((item, index) => {
                    ChoicesCollection.push({
                        key: parseInt(item.Id),
                        // text: item[SPFieldName],
                        // title:item[SPFieldName],
                        name: item[SPFieldName],
                    });
                });
                return ChoicesCollection;
            }

        }).catch((e) => console.log("Error in GetLookupData() function. " + e));
}

In above example I am getting data from “Record Location” list using async function GetLookupData and trying to set default value using SelectedRecordLocation state variable.

Control re renders when we set state in componentDidMount however it is not setting default value for ListItemPicker control.

Please let me know if this is bug /any solution is there for this issue

Any help will be appreciated.

Thanks!

[AJIXuMuK]

Another option here could be to display Spinner until loading the items.

{this.state.defaultItems && <ListItemPicker ... />}
{!this.state.defaultItems && <Spinner ... />}

[Macro21]

Hi! I have the same problem. I solved it with a method and the react state…

Update: The bug its on Fabric UI TagPicker. ListItemPicker use TagPicker 😃