From 3b7cce56b90de2502b1f997ae0ff74918fcee718 Mon Sep 17 00:00:00 2001
From: Doma <leishenghao@126.com>
Date: Wed, 5 Jul 2023 11:56:41 +0800
Subject: [PATCH] fix(Picker): pass name prop to underlying input element
 (#3275)

---
 src/Picker/PickerToggle.tsx                | 5 ++++-
 src/Picker/test/PickerToggleSpec.tsx       | 7 +++++++
 src/Picker/utils.ts                        | 3 ++-
 src/SelectPicker/test/SelectPickerSpec.tsx | 7 +++++++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/Picker/PickerToggle.tsx b/src/Picker/PickerToggle.tsx
index 611794ee23..1246024c4b 100644
--- a/src/Picker/PickerToggle.tsx
+++ b/src/Picker/PickerToggle.tsx
@@ -31,6 +31,7 @@ export interface PickerToggleProps extends ToggleButtonProps {
 
   // Renders an input and is editable
   editable?: boolean;
+  name?: string;
   inputPlaceholder?: string;
   inputMask?: (string | RegExp)[];
   onInputChange?: (value: string, event: React.ChangeEvent) => void;
@@ -85,6 +86,7 @@ const PickerToggle: RsRefForwardingComponent<typeof ToggleButton, PickerTogglePr
       caretComponent,
       caretAs = caretComponent,
       label,
+      name,
       ...rest
     } = props;
 
@@ -189,11 +191,12 @@ const PickerToggle: RsRefForwardingComponent<typeof ToggleButton, PickerTogglePr
       (ref, props) => (
         <input
           ref={mergeRefs(inputRef, ref)}
+          name={name}
           style={{ pointerEvents: editable ? undefined : 'none' }}
           {...props}
         />
       ),
-      [editable]
+      [editable, name]
     );
 
     const ToggleCaret = useToggleCaret(placement);
diff --git a/src/Picker/test/PickerToggleSpec.tsx b/src/Picker/test/PickerToggleSpec.tsx
index 727fc7d210..52e24a0860 100644
--- a/src/Picker/test/PickerToggleSpec.tsx
+++ b/src/Picker/test/PickerToggleSpec.tsx
@@ -30,6 +30,13 @@ describe('<PickerToggle>', () => {
     assert.equal(instance.textContent, Title);
   });
 
+  it('Should render a hidden <input> element with given "name" attribute', () => {
+    const { container } = render(<Toggle name="field" />);
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelector('input')).to.have.attr('name', 'field');
+  });
+
   describe('Cleanable (`cleanable`=true)', () => {
     it('Should render a clear button when value is present', () => {
       render(
diff --git a/src/Picker/utils.ts b/src/Picker/utils.ts
index b2111a6ab3..79d97db8a4 100644
--- a/src/Picker/utils.ts
+++ b/src/Picker/utils.ts
@@ -109,8 +109,9 @@ export function usePickerClassName(props: PickerClassNameProps): [string, string
     })
   );
 
+  // Those props that're used for composing the className
   const usedClassNamePropKeys = Object.keys(
-    omit(props, [...Object.keys(rest || {}), 'disabled', 'readOnly', 'plaintext'])
+    omit(props, [...Object.keys(rest || {}), 'disabled', 'readOnly', 'plaintext', 'name'])
   );
 
   return [classes, usedClassNamePropKeys];
diff --git a/src/SelectPicker/test/SelectPickerSpec.tsx b/src/SelectPicker/test/SelectPickerSpec.tsx
index bf76473207..357126d8be 100644
--- a/src/SelectPicker/test/SelectPickerSpec.tsx
+++ b/src/SelectPicker/test/SelectPickerSpec.tsx
@@ -59,6 +59,13 @@ describe('SelectPicker', () => {
     expect(instance).to.have.class('rs-picker-disabled');
   });
 
+  it('Should render a hidden <input> with given "name" attribute', () => {
+    const { container } = render(<SelectPicker data={[]} name="field" />);
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelector('input')).to.have.attr('name', 'field');
+  });
+
   describe('Loading state', () => {
     it('Should display a spinner when loading=true', () => {
       render(<SelectPicker data={data} loading />);