fix(Picker): pass name prop to underlying input element (#3275)

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

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(

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];

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 />);