onSelection is not working when type is collection in Resource Picker

[ubaidhussain]

When I open Resource picker with type collection initially id doesn't work. I have to close and reopen it to work again. So if I am going to select collection I have to open Resource picker two times and it works perfectly for Product type.

[olavoasantos]

Hi @ubaidhussain. How are you?

My name is Olavo, I'm part of Shopify's App Bridge team. Thank you for reaching out.

I tried to reproduce this issue but couldn't. Could you provide:

* The exact version of App Bridge you're using

* A code sample of how you're using it

[mohitpatel]

can you please share the code I need to help you? 

[mohitpatel]

export default function Page() {

async function selectCollection() {

const existingCollectionIds = formData.collectionId.split(',');

console.log(existingCollectionIds);

console.log('test');

const selectionIds = existingCollectionIds.map(id => ({

id: id.trim(),

}));

console.log(selectionIds);

console.log('teste');

const selected = await window.shopify.resourcePicker({

type: 'collection',

selectionIds: selectionIds,

multiple: true,

filter: {

hidden: true,

draft: false,

archived: false,

},

});

if (selected.length > 0) {

const collectionId = [];

const collectionTitles = [];

const collectionHandles = [];

const collectionImages = [];

selected.forEach(collection => {

collectionId.push(collection.id);

collectionTitles.push(collection.title);

collectionHandles.push(collection.handle);

collectionImages.push(collection.image?.originalSrc || '');

});

setFormData({

...formData,

collectionId: collectionId.join(','),

collectionTitle: collectionTitles.join(','),

collectionHandle: collectionHandles.join(','),

collectionImage: collectionImages.join(','),

});

}

}

}
below code is prisma 

return (

<Box padding="400">

<Button onClick={selectCollection}>Select Collection</Button>

{formData.collectionId && (

<Box>

<DataTable

columnContentTypes={['text', 'text', 'text']}

headings={['Collection Image', 'Collection Title', 'Actions']}

rows={formData.collectionTitle.split(',').map((title, index) => [

formData.collectionImage.split(',')[index] ? (

<Thumbnail

source={formData.collectionImage.split(',')[index]}

alt={`Collection: ${title}`}

/>

) : null,

<Text as="span" variant="headingMd" fontWeight="semibold">

{title}

</Text>,

<Button icon={DeleteIcon} tone="critical" onClick={() => handleDeleteCollection(index)} />

])}

/>

<input type="hidden" name="collectionid" value={formData.collectionId} />

<input type="hidden" name="collectiontitle" value={formData.collectionTitle} />

<input type="hidden" name="collectionhandle" value={formData.collectionHandle} />

<input type="hidden" name="collectionimage" value={formData.collectionImage || ''} />

</Box>

)}

</Box>

)

above code is work for me my custom app for collection.