Skip to content

How to disable row collapse when clicking anywhere on the window #255

@cardinalpipkin

Description

@cardinalpipkin

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions