Hi @anna_ten ,
That was a great question. I got to understand the new scenario. Although I haven't encountered these types of issues yet, I believe you should try the solution I am providing. Also, let me know if it works.
here's a possible approach to address the issue of the handleSelection callback being fired multiple times for a single selection in the Adobe Experience Manager (AEM) Sites Asset Selector:
Use a State Management Approach:
To handle the issue of multiple callbacks firing due to repeated component rendering, you can manage the selected items using a state management approach. This can help ensure that the callback is triggered only once per selection, regardless of how many times the component is rendered.
import React, { useState } from 'react';
import AssetSelectorWithAuthFlow from 'your-asset-selector-path';
function YourComponent() {
const [selectedItems, setSelectedItems] = useState([]);
const handleSelection = (newlySelectedItems) => {
setSelectedItems(newlySelectedItems);
// Your handling logic here
};
return (
<div>
{/* Render your popout component here */}
<AssetSelectorWithAuthFlow
onSelectionChange={handleSelection}
/>
</div>
);
}
In this example, the useState hook is used to manage the selected items. The handleSelection callback updates the selected items state whenever a selection is made. This approach ensures that the selected items are synchronized with the component's state and that the callback is fired only once per selection.
Debounce the Callback:
If the above solution doesn't fully resolve the issue, you can apply debouncing to the handleSelection callback using a library like Lodash. This will ensure that the callback is invoked only after a certain delay since the last selection change.
import React from 'react';
import _ from 'lodash';
import AssetSelectorWithAuthFlow from 'your-asset-selector-path';
function YourComponent() {
const handleSelection = _.debounce((newlySelectedItems) => {
// Your handling logic here
}, 300); // Debounce delay of 300 milliseconds
return (
<div>
{/* Render your popout component here */}
<AssetSelectorWithAuthFlow
onSelectionChange={handleSelection}
/>
</div>
);
}
The _.debounce function wraps the handleSelection callback, causing it to be executed only after the specified delay (300 milliseconds in this example) since the last invocation.
By using these strategies, you should be able to prevent multiple invocations of the handleSelection callback for a single selection in the Asset Selector popout. However, please note that these solutions might need to be adapted to fit the specifics of your implementation and the framework you're using.
