Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#799 5 commentaires 15 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
48/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
À l'abandon
Stack technique
react, typescript
Domaine
frontend

Piste de recherche

Commencez par l’implémentation de et reproduisez le problème à l’aide de l’exemple de formulaire CodeSandbox lié. Consultez les issues 790 et 791 associées de react-component/select pour le contexte concernant le comportement du formulaire. Le travail est terminé lorsqu’un nommé contribue sa valeur sélectionnée, y compris les sélections multiples, à la soumission native du formulaire sans modifier l’utilisation existante.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
TypeScript
Étoiles
939
Forks
480
Aucune PR mergée en 30 j

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de react-component/select

Toutes les issues de react-component/select

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.