fix: avoid use of patternfly Card isClickable

problematic with z-index clicks and requires a global dom id for the click area. problemtic! Signed-off-by: Nick Mitchell <[email protected]>
IBM · Jan 21, 2025 · a543989 · a543989
1 parent 290f5e2
commit a543989
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 10 deletions.
diff --git a/pdl-live-react/src/view/transcript/BreadcrumbBar.css b/pdl-live-react/src/view/transcript/BreadcrumbBar.css
@@ -6,9 +6,6 @@
   /** Size factor relative to 1em */
   --pdl-bb: 0.625;
 
-  /** So that clicks get sent here first, not to the <Card isClickable/> used in <TranscriptItem/> */
-  z-index: 1000;
-
   list-style: none;
   display: inline-block;
   font-size: calc(var(--pdl-bb) * 1em);

diff --git a/pdl-live-react/src/view/transcript/Transcript.css b/pdl-live-react/src/view/transcript/Transcript.css
@@ -1,4 +1,7 @@
 .pdl-transcript-item {
+  &:hover:before {
+    border-color: var(--pf-v6-c-card--m-selectable--hover--BorderColor);
+  }
   &:first-child {
     /* margin-top: 1em; */
   }

diff --git a/pdl-live-react/src/view/transcript/TranscriptItem.tsx b/pdl-live-react/src/view/transcript/TranscriptItem.tsx
@@ -96,18 +96,12 @@ export default function TranscriptItem(props: Props) {
       key={props.ctx.id}
       id={props.ctx.id}
       onClick={drilldown}
-      isClickable
       className={
         "pdl-transcript-item" + (props.className ? " " + props.className : "")
       }
       data-id={props.ctx.id}
     >
-      <CardHeader
-        selectableActions={{
-          onClickAction: drilldown,
-          selectableActionAriaLabelledby: props.ctx.id,
-        }}
-      >
+      <CardHeader>
         <CardTitle>{headerContent}</CardTitle>
       </CardHeader>