ant-design: Support Missing `name` prop for ``

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

About this issue

• Original URL
• State: closed
• Created 2 years ago
• Reactions: 6
• Comments: 18 (4 by maintainers)

Most upvoted comments

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

+13

nnmax on Nov 28, 2022

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

+11

cliffordfajardo on Jul 13, 2022

Thanks for taking a look 🙏

there is even no

element in dom when showSearch={false}

I am seeing an <input> element when showSearch={false} as well (video shows) Stackblitz Example: https://stackblitz.com/edit/react-ltsgbj?file=demo.js

https://user-images.githubusercontent.com/6743796/178735079-0bddf898-3843-492a-9909-08a9cd94b350.mp4

<Select> don’t support native name property

Is there a strong reason why we don’t support passing name prop on <Select> like we allow for <Input>?

• Ant’s <Input> element:

  • ✅ supports name prop; follows standard behavior of HTML (docs)
  • ✅ because name prop is supported, you can wrap regular HTML <form> element around ant design elements

• Ant’s <Select> element:

  • ❌ supports name prop; follows standard behavior of HTML (docs. For example a regular <select> element supports name
    

  • ❌ because name prop is not supported, you cant wrap regular HTML <form> element around ant design elements (if name prop is supported this can be true ✅ )

Although I do care about the HTML standard, its not the motivation for this “bug” report.

The motivation is:

• I can’t use a regular <form> around <Select> because it doesn’t allow me add a name prop to it.
  • There is no issue with ant’s <Input> which does support name prop which means I can use a regular <form>
• I can’t use Remix’s <Form> element to do data submission’s because the name property is missing on <Select> element