How to disable row collapse when clicking anywhere on the window
cardinalpipkin opened this issue · comments
cardinalpipkin commented
I have a problem when a user clicks to expand a row, it does so, but if the user clicks away from the collapsible component, (anywhere within the window) it will collapse the row. Is this intentional?
const getAssociatedSitesForCollapsible = (hubSite: any, i: any) => {
setExpandedHubSiteIndex(i);
setSelectedHubSiteUrl(hubSite);
if (i === expandedHubSite) {
setExpandedHubSite(null);
}
else {
setExpandedHubSite(i);
}
const filterTheAssociatedSites = unfilteredSites.filter((hub) => {
return hubSite === hub.Hub
});
setAssociatedSites(filterTheAssociatedSites);
};
{topLevelHubSites.map((element, i) => (
<Collapsible
// triggerDisabled={showMembersDataCard}
trigger={
<table className={styles.hubsites}>
<tr >
<td>
<Stack >
...
</Stack>
</td>
</tr>
</table>
}
key={i}
open={expandedHubSite === i}
onClose={onCollapse}
onOpening={() => getAssociatedSitesForCollapsible(element.Hub, i)}
transitionTime={200}
>
{associatedSites.length > 0 ? associatedSites.map((assSite: any, key) => {
return (
<table key={key} className={styles.associatedSites}>
<tr>
<td>
{assSite.SiteUrl.substring(assSite.SiteUrl.lastIndexOf('/') + 1)}
</td>
<td className={styles.tdTools}>
<IconButton
iconProps={people}
onClick={() => handleMembersDataCard(element.Hub, i)}
ref={clickedHubPersonIcon}
/>
</td>
</tr>
</table>)
}) : null}
</Collapsible>
))}
How can I stop this from happening? I've used triggerDisabled
property but it doesn't work as intended.