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

Bắt đầu với phần triển khai và tái hiện vấn đề bằng ví dụ form CodeSandbox được liên kết. Xem các issue 790 và 791 liên quan của react-component/select để hiểu bối cảnh về hành vi của form. Công việc được xem là hoàn tất khi một có tên đóng góp giá trị đã chọn của nó, bao gồm cả các lựa chọn multiple, vào việc gửi form native mà không thay đổi cách sử dụng hiện có.

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