From d53647018cfd6bb95e9651bdfeac5f3a0d9139f4 Mon Sep 17 00:00:00 2001
From: oreqizer <oreqizer@gmail.com>
Date: Fri, 10 Nov 2023 10:05:18 +0100
Subject: [PATCH] fix(Card): only capture keys on expandable sections

---
 .../Card/CardSection/CardSection.ct-story.tsx    | 15 +++++++++++++++
 .../src/Card/CardSection/CardSection.ct.tsx      | 16 ++++++++++++++++
 .../src/Card/CardSection/index.tsx               |  2 +-
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 packages/orbit-components/src/Card/CardSection/CardSection.ct-story.tsx
 create mode 100644 packages/orbit-components/src/Card/CardSection/CardSection.ct.tsx

diff --git a/packages/orbit-components/src/Card/CardSection/CardSection.ct-story.tsx b/packages/orbit-components/src/Card/CardSection/CardSection.ct-story.tsx
new file mode 100644
index 0000000000..575ee08b89
--- /dev/null
+++ b/packages/orbit-components/src/Card/CardSection/CardSection.ct-story.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import RandomIdProvider from "../../OrbitProvider/RandomId/Provider";
+
+import CardSection from ".";
+
+export function CardSectionInput() {
+  return (
+    <RandomIdProvider useId={React.useId}>
+      <CardSection>
+        <input type="text" data-test="input" />
+      </CardSection>
+    </RandomIdProvider>
+  );
+}
diff --git a/packages/orbit-components/src/Card/CardSection/CardSection.ct.tsx b/packages/orbit-components/src/Card/CardSection/CardSection.ct.tsx
new file mode 100644
index 0000000000..195ce5a1a0
--- /dev/null
+++ b/packages/orbit-components/src/Card/CardSection/CardSection.ct.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import { CardSectionInput } from "./CardSection.ct-story";
+
+test.describe("interaction", () => {
+  test("typing spaces works on non-expandable sections", async ({ mount }) => {
+    const component = await mount(<CardSectionInput />);
+    const input = component.getByTestId("input");
+
+    await input.focus();
+    await input.press("Space");
+
+    expect(await input.inputValue()).toBe(" ");
+  });
+});
diff --git a/packages/orbit-components/src/Card/CardSection/index.tsx b/packages/orbit-components/src/Card/CardSection/index.tsx
index e041a54eac..c266cedd24 100644
--- a/packages/orbit-components/src/Card/CardSection/index.tsx
+++ b/packages/orbit-components/src/Card/CardSection/index.tsx
@@ -65,7 +65,7 @@ export default function CardSection({
       tabIndex={onClick == null ? undefined : 0}
       onClick={onClick}
       // Not needed once we can use <button> or <a> like we should
-      onKeyDown={handleKeyDown(onClick)}
+      onKeyDown={onClick == null ? undefined : handleKeyDown(onClick)}
     >
       {(title != null || header != null) && expandable && (
         <button