fix: Sender.Header can not focus (#175)

ant-design · Nov 1, 2024 · 86787e6 · 86787e6
1 parent 6bddb3d
commit 86787e6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git 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
@@ -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