fix: Extend clickable area of Prompt Input (#3299)

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({

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>
         )}

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;
+}