From 86787e60af2b3432b079ec8f6926b956a9763cb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 1 Nov 2024 12:49:34 +0800
Subject: [PATCH] fix: Sender.Header can not focus (#175)

---
 components/sender/__tests__/index.test.tsx | 24 ++++++++++++++++++++++
 components/sender/index.tsx                |  5 ++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/components/sender/__tests__/index.test.tsx b/components/sender/__tests__/index.test.tsx
index 1190aa60..64009ff6 100644
--- a/components/sender/__tests__/index.test.tsx
+++ b/components/sender/__tests__/index.test.tsx
@@ -109,4 +109,28 @@ describe('Sender Component', () => {
       expect(onSubmit).toHaveBeenCalledWith('bamboo');
     });
   });
+
+  it('Sender.Header can be focus', () => {
+    const { container } = render(
+      <Sender
+        header={
+          <Sender.Header open>
+            <input className="target" />
+          </Sender.Header>
+        }
+      />,
+    );
+
+    const inputEle = container.querySelector<HTMLInputElement>('.target')!;
+    inputEle.focus();
+    expect(document.activeElement).toEqual(inputEle);
+
+    // Click on the header
+    fireEvent.mouseDown(container.querySelector('.ant-sender-header')!);
+    expect(document.activeElement).toEqual(inputEle);
+
+    // Click on the content
+    fireEvent.mouseDown(container.querySelector('.ant-sender-content')!);
+    expect(document.activeElement).toEqual(container.querySelector('textarea'));
+  });
 });
diff --git a/components/sender/index.tsx b/components/sender/index.tsx
index 565bb4de..29dcceaf 100644
--- a/components/sender/index.tsx
+++ b/components/sender/index.tsx
@@ -211,7 +211,7 @@ function Sender(props: SenderProps, ref: React.Ref<HTMLDivElement>) {
   };
 
   // ============================ Focus =============================
-  const onInternalMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
+  const onContentMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
     // If input focused but click on the container,
     // input will lose focus.
     // We call `preventDefault` to prevent this behavior
@@ -250,14 +250,13 @@ function Sender(props: SenderProps, ref: React.Ref<HTMLDivElement>) {
       ref={mergedContainerRef}
       className={mergedCls}
       style={{ ...contextConfig.style, ...style }}
-      onMouseDown={onInternalMouseDown}
     >
       {/* Header */}
       {header && (
         <SendHeaderContext.Provider value={{ prefixCls }}>{header}</SendHeaderContext.Provider>
       )}
 
-      <div className={`${prefixCls}-content`}>
+      <div className={`${prefixCls}-content`} onMouseDown={onContentMouseDown}>
         {/* Prefix */}
         {prefix && (
           <div