fix: proposal table component propagation

alleslabs · May 11, 2023 · a71392a · a71392a
1 parent 56b526c
commit a71392a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -47,6 +47,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#330](https://github.com/alleslabs/celatone-frontend/pull/330) Fix proposal table component propagation
+
 ## v1.0.4
 
 ### Bug fixes

diff --git a/src/lib/components/StopPropagationBox.tsx b/src/lib/components/StopPropagationBox.tsx
@@ -0,0 +1,8 @@
+import { Box } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+export const StopPropagationBox = ({ children }: { children: ReactNode }) => (
+  <Box onClick={(e) => e.stopPropagation()} cursor="initial">
+    {children}
+  </Box>
+);
diff --git a/src/lib/components/table/proposals/VotingEndTime.tsx b/src/lib/components/table/proposals/VotingEndTime.tsx
@@ -31,6 +31,8 @@ export const VotingEndTime = ({
           fontSize: "12px",
         },
       }}
+      onClick={(e) => e.stopPropagation()}
+      cursor="initial"
     >
       <p>{isDepositPeriod ? "Voting not started" : formatUTC(votingEndTime)}</p>
       <p>

diff --git a/src/lib/pages/proposals/components/ProposalTextCell.tsx b/src/lib/pages/proposals/components/ProposalTextCell.tsx
@@ -41,6 +41,8 @@ export const ProposalTextCell = ({
       maxW={showName ? undefined : "full"}
       onMouseOver={() => setIsHoverText(true)}
       onMouseOut={() => setIsHoverText(false)}
+      onClick={(e) => e.stopPropagation()}
+      cursor="initial"
     >
       <Text
         ref={titleRef}

diff --git a/src/lib/pages/proposals/table/ProposalTableRow.tsx b/src/lib/pages/proposals/table/ProposalTableRow.tsx
@@ -5,6 +5,7 @@ import { useWallet } from "@cosmos-kit/react";
 import { ProposalTextCell } from "../components/ProposalTextCell";
 import { getExplorerProposalUrl } from "lib/app-fns/explorer";
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { StopPropagationBox } from "lib/components/StopPropagationBox";
 import { TableRow, TableRowFreeze } from "lib/components/table";
 import { Proposer } from "lib/components/table/proposals/Proposer";
 import { ResolvedHeight } from "lib/components/table/proposals/ResolvedHeight";
@@ -84,7 +85,9 @@ export const ProposalTableRow = ({
         />
       </TableRowFreeze>
       <TableRow justifyContent="center">
-        <StatusChip status={proposal.status} />
+        <StopPropagationBox>
+          <StatusChip status={proposal.status} />
+        </StopPropagationBox>
       </TableRow>
       <TableRow>
         <VotingEndTime
@@ -94,12 +97,14 @@ export const ProposalTableRow = ({
         />
       </TableRow>
       <TableRow>
-        <ResolvedHeight
-          resolvedHeight={proposal.resolvedHeight}
-          isDepositFailed={isDepositFailed}
-          isDepositOrVoting={isDepositOrVoting}
-          amptrackSection="proposal-list"
-        />
+        <StopPropagationBox>
+          <ResolvedHeight
+            resolvedHeight={proposal.resolvedHeight}
+            isDepositFailed={isDepositFailed}
+            isDepositOrVoting={isDepositOrVoting}
+            amptrackSection="proposal-list"
+          />
+        </StopPropagationBox>
       </TableRow>
       <TableRow>
         <Proposer