Support Missing `name` prop for `<Select>`

Reproduction link (click button below)

Steps to reproduce

Attempt to pass name property to <Select> element

What is expected?

1. You should be able to pass name prop to <Select> element. After passing name prop, it should get passed down to the input element that gets rendered in the DOM.
2. Allowing user to pass name also aligns with other Ant form elements such as <Input> which does accept name attribute

  <Input
    placeholder="Employee name"
    name="name" // ✅ 
  />


<Select
  // name="" ❌ `name` prop should be allowed. `name` is valid attribute on <select> elements in HTML standard: https://www.w3schools.com/tags/att_select_name.asp --- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name
  placeholder="Select a department"
  showSearch
  allowClear
  defaultValue=""
>
  {["Engineering", "Sales", "Finance", "Marketing", "Legal"].map(
    (option) => (
      <Select.Option
        key={option}
        value={option}
        name="department"
      >
        {option}
      </Select.Option>
    )
  )}
</Select>

Per regular HTML rules / specifications, HTML <select> is allowed to have a name attribute on it.

Why is this Change Important?

1. When you submit an HTML form, the name attribute on the form elements (input, select etc ) is used to create a key inside the form object. For example, you can verify this by filling in the form in the codesandbox demo and calling the function below inside your browser developer tools (NOTE the code snippet below is not how I write regular react code reaching into the DOM, the method below is for illustrative debugging purpose)::

const getFormData = () => {
  const formObject = new FormData(document.querySelector("#my-form") as HTMLFormElement) as any;
  const formData = Object.fromEntries(formObject);
  console.log(`form values`, formData);
};
getFormData() // call from javascript console after filling out form

Codesandbox: https://codesandbox.io/s/antd-select-missing-name-attribute-forked-tmlsg0?file=/src/App.tsx

https://user-images.githubusercontent.com/6743796/178577370-7d28378c-3036-41fc-ba49-80827c089176.mp4

1. When you submit an HTML form with attribute method=get, the native HTML form element does not find the name attribute associated with the ant’s <Select> element so the name attribute is not being added to the URL Demo URL (open the preview in a new tab by clicking “Open in New Window”):

• Stackblitz URL:
  • code (click “Open in New Window” to see URL param updates): https://stackblitz.com/edit/node-6z19rg?file=package.json,app%2Froutes%2Findex.tsx
  • code preview URL: https://node-6z19rg--3000.local.webcontainer.io/

https://user-images.githubusercontent.com/6743796/178580314-55669e6b-29cf-4727-9016-83220cb7f798.mp4

1. Many people would like to use Ant’s form element’s for decorative purposes only and often cannot use the <Form> element from Ant. (example stackblitz sandbox)

What is actually happening?

1. When pass name prop you get a typescript error/warning.
2. Passing name prop with value does not attach name prop with value to the <input> element associated with the <Select> element in the DOM (see attached video)

Environment	Info
antd	4.21.6
React	18.0.0
System	MacOS
Browser	Chrome latest version

Related

• https://github.com/react-component/select/issues/790

[nnmax]

Why doesn’t Select support the name attribute? This issue should not be closed until a reasonable explanation is given.

[cliffordfajardo]

I suppose my main 2 questions are 😅 :

1.Why not support name if its supported with <Input>?

• if a regular <select> supports name prop, why not for <Select>?
  • not supporting name is inconsistent with how ant’s <Input> supports name prop like regular HTML standard which supports name

2.How can I pass a name prop to <Select> field (technically <Select> renders to an <input> in DOM per video linked above)?

• this would allow me to use <form> or Remix’s <Form> element

I am happy to open a PR if you are open to the idea; I’m just not sure if the change is in the ant-design repo or react-component/select repoistiory