Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#799 5 comentários 15 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
48/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Estagnada
Stack de tecnologia
react, typescript
Domínio
frontend

Direção de pesquisa

Comece pela implementação de e reproduza o problema usando o exemplo de formulário do CodeSandbox vinculado. Revise as issues 790 e 791 relacionadas de react-component/select para obter contexto sobre o comportamento do formulário. Está concluído quando um nomeado contribui com seu valor selecionado, incluindo seleções múltiplas, para o envio nativo do formulário sem alterar o uso existente.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

  1. 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"> ).
    CleanShot 2022-07-19 at 08 46 57@2x

  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

Related Issues

Linguagem predominante
TypeScript
Estrelas
939
Forks
480
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de react-component/select

Todas as issues de react-component/select

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.