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

の実装から始め、リンクされている CodeSandbox のフォーム例を使って問題を再現してください。フォームの動作に関するコンテキストとして、関連する react-component/select の issue 790 と 791 を確認してください。既存の使い方を変更せず、名前付きの が複数選択を含む選択値をネイティブなフォーム送信に含められれば完了です。

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