`<Select>` component `<form>` compatability

Beginne mit der Implementierung von und reproduziere das Problem anhand des verknüpften CodeSandbox-Formularbeispiels. Sieh dir die zugehörigen react-component/select-Issues 790 und 791 an, um den Kontext zum Formularverhalten zu erhalten. Als erledigt gilt die Aufgabe, wenn ein benanntes seinen ausgewählten Wert, einschließlich mehrerer Auswahlen, zur nativen Formularübermittlung beiträgt, ohne die bestehende Verwendung zu ändern.

Description

Currently <Select> component is not fully <form> compatible, which means when you submit a <Form> or <form> the data from the <Select> is not included in the form submission.

How to Reproduce Bug

Submit a form which contain's <Select> (see video below or see codesandbox here)

• observe that form submission does not update the URL
• observe that no data is being sent to the backend
  

Motivation For Changes

1. HTML <form> compatibility

• Being <form> compliant means that people have the additional option of using Ant's <Select> in a similar way to using a standard<select> without losing the great UX/UI that <Select> offers (for example using <Select showSearch> is awesome!)

2. Many of Ant design's existing form-related components are already <form> compliant

• <Input>, <InputNumber> and <Mentions> are already <form> compliant
• codesandbox testing <form> compliance of components above https://codesandbox.io/s/draft1-testing-ant-form-compatability-forked-z35rhu?file=/app/routes/examples/checkbox-component.tsx

3. Removes the need for a user of Ant Design to manually add hidden input fields . This is the same issue Tailwind Headless UI had but solved in this pull request

Proposition of Changes

The proposed changes below are backwards compatible:

1. allow user to pass name prop to <Select> to achieve feature compliance with regular<select> which does allow name prop (Ex: <select name="vehicle"> ).
   

2. When a user passes name prop to <Select> generate a hidden input (<input type="hidden" name={selectProps.name}>) and when the user selects the value from the list, add value attribute to the hidden input and set it to the selected value (<input type="hidden" name={selectProps.name} value={selected_value}>. Inspiration for this implementation comes from Tailwind's Headless UI react library (Github Pull Request)

For single item selection (fake code for demonstrative purpose)

<Select showSearch style={{ width: 300 }} name="job_title">
    <Select.Option value="engineer">engineer</Select.Option>
    <Select.Option value="teacher">teacher</Select.Option>
      // This hidden input would get generated from <Select> when a `name` prop is provided
     // <input type="hidden" name={select.props.name} value={the_selected_value}>
</Select>

For multi selection (fake code for demonstrative purpose) mode=tags | multiple

<Select showSearch style={{ width: 300 }} name="job_title">
    <Select.Option value="engineer">engineer</Select.Option>
    <Select.Option value="teacher">teacher</Select.Option>
      // Any time a new item is selected a new  hidden input is generated from <Select> when a `name` prop is provided
     // <input type="hidden" name={select.props.name} value={the_selected_value}>
     // <input type="hidden" name={select.props.name} value={the_selected_value}>
</Select>

Summary

To solve this, <Select> needs name prop support & it needs to generate a hidden <input> element for the selected value

References

Documentation for <form> comptability

• <form> compatibility example Github Pull request for tailwind React UI library + example tests
• documentation for `

Related Issues

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