glennflanagan / react-collapsible

React component to wrap content in Collapsible element with trigger to open and close.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to disable row collapse when clicking anywhere on the window

cardinalpipkin opened this issue · comments

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.