ComboBoxListItemPicker - onSelectedItem passing data to callback method but with attributes value as 'undefined'

[siddharth-vaghasia]

Category

[ ] Enhancement

[X ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.17.0 ]

Expected

While overriding onSelectedItem method we should get an array of the selected items with Id and Title column.

Below is sample implementation.

<ComboBoxListItemPicker listId='ba682bc2-351e-45ae-8cbe-b0512ba0291a' columnInternalName='Title' keyColumnInternalName='Id' // filter="Title eq 'SPFx'" onSelectedItem={this.onSelectedComboBoxItemPicker} webUrl={this.props.context.pageContext.web.absoluteUrl} spHttpClient={this.props.context.spHttpClient} multiSelect={true} />

private onSelectedComboBoxItemPicker(data: { key: string; name: string }[]) { for (const item of data) { console.log(Item value: ${item.key}); console.log(Item text: ${item.name}); } }

Observed Behavior

We are getting Id and Title as undefined in the array. Please refer below screenshot.

Further analysis and a possible fix.

Reference file = webpack:///../../../../src/controls/listItemPicker/ComboBoxListItemPicker.tsx

Thanks!

[ghost]

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

[RantingLemming]

Encountered similar issue and came to same conclusion/resolution as @siddharth-vaghasia.

This also seems only applicable to when the multiSelect prop is passed. When not passing multiSelect, no results are returned at all. The value still seems to be returned if I insert a console.log(option) into the above onChanged function, but the else case doesn't return anything as console logging this.selectedItems returns no result, thus line 115 above would likewise result in nothing when you try to filter over it.

[mgwojciech]

Hi Guys,
Thanks for reporting this. One note (maybe that is not documented well), onSelectedItem always passes selected item, not whole array (same for single and multi select). You can check the details using onSelectedItem={(item) => {
console.log(item);
}}
You will notice that for single selection mode the selected property is undefined and for multi select You will get information if the value was selected or the selection was removed

Hope that helps

[AJIXuMuK]

Thank all of you for active discussion!
The fix has been merged and available in the beta version.
Could you please test it on your end as well?
Thanks!

[siddharth-vaghasia]

@AJIXuMuK ...thanks...tested this...it is working as expected if we write call back with below syntax

private onSelectedComboBoxItemPicker(items:[]) {
    console.log("selected items:", items);
     }
  }

Call back method documented in markup is below, which won't copy values in key and name unless it is passed in the same format.... So I believe we should update the documentation to the above syntax. submitting a PR for same, please merge it if it make sense..!!

private onSelectedItem(data: { key: string; name: string }[]) {
  for (const item of data) {
    console.log(`Item value: ${item.key}`);
    console.log(`Item text: ${item.name}`);
  }
}

[AJIXuMuK]

The documentation has been merged as well.