From 090637454c91ab74d3e5ac51372b5c9ee9e35fb8 Mon Sep 17 00:00:00 2001
From: Connor Lanigan <dev@connorlanigan.com>
Date: Tue, 18 Feb 2025 13:17:59 +0100
Subject: [PATCH] fix: Extend clickable area of Prompt Input (#3299)

---
 src/prompt-input/__tests__/prompt-input.test.tsx | 13 +++++++++++++
 src/prompt-input/internal.tsx                    |  1 +
 src/prompt-input/styles.scss                     |  6 ++++++
 3 files changed, 20 insertions(+)

diff --git a/src/prompt-input/__tests__/prompt-input.test.tsx b/src/prompt-input/__tests__/prompt-input.test.tsx
index f8db96576b..a1426d464f 100644
--- a/src/prompt-input/__tests__/prompt-input.test.tsx
+++ b/src/prompt-input/__tests__/prompt-input.test.tsx
@@ -9,6 +9,8 @@ import PromptInput, { PromptInputProps } from '../../../lib/components/prompt-in
 import createWrapper from '../../../lib/components/test-utils/dom';
 import PromptInputWrapper from '../../../lib/components/test-utils/dom/prompt-input';
 
+import styles from '../../../lib/components/prompt-input/styles.selectors.js';
+
 jest.mock('@cloudscape-design/component-toolkit', () => ({
   ...jest.requireActual('@cloudscape-design/component-toolkit'),
   useContainerQuery: () => [800, () => {}],
@@ -305,6 +307,17 @@ describe('secondary actions', () => {
   });
 });
 
+test('clicking the area between secondary actions and action button should focus the component', () => {
+  const { wrapper } = renderPromptInput({
+    value: '',
+    secondaryActions: 'secondary actions',
+  });
+
+  wrapper.find(`.${styles.buffer}`)!.click();
+
+  expect(wrapper.findNativeTextarea().getElement()).toHaveFocus();
+});
+
 describe('secondary content', () => {
   test('should render correct text in secondary content slot', () => {
     const { wrapper } = renderPromptInput({
diff --git a/src/prompt-input/internal.tsx b/src/prompt-input/internal.tsx
index 205a3cb026..752078b898 100644
--- a/src/prompt-input/internal.tsx
+++ b/src/prompt-input/internal.tsx
@@ -215,6 +215,7 @@ const InternalPromptInput = React.forwardRef(
             })}
           >
             {secondaryActions}
+            <div className={styles.buffer} onClick={() => textareaRef.current?.focus()} />
             {hasActionButton && action}
           </div>
         )}
diff --git a/src/prompt-input/styles.scss b/src/prompt-input/styles.scss
index b8b11b855d..bca6623a76 100644
--- a/src/prompt-input/styles.scss
+++ b/src/prompt-input/styles.scss
@@ -199,3 +199,9 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
     padding-block-end: awsui.$space-scaled-xxs;
   }
 }
+
+.buffer {
+  flex: 1;
+  align-self: stretch;
+  cursor: text;
+}