Should we support <select /> with multiple=true like ReactJS?

Open
#283 4 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
30/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
react
Domain
frontend

Research direction

Start by reviewing the existing value and multiple bindings described in the issue, then compare them with React's select API. Define the supported value shape and add coverage for multiple selections; the work is done when valid multi-select values compile and render without the reported browser warning.

Written by the indexing model from the issue text.

Description

docs question RFC

In ReactJS we can easily make a multiselect component by setting our value to an array of strings instead of a single string like so:

Note

You can pass an array into the value attribute, allowing you to select multiple options in a select tag:

<select multiple={true} value={['B', 'C']}>

see: https://reactjs.org/docs/forms.html#the-select-tag

Intuitively, I thought this would be the case for ReasonReact as well, allowing us to use list(string) or array(string) to achieve the same behavior.

As of now the value of a <select /> component expects value to be a string, even when multiple=true. adding multiple=true and value=string satisfies the compiler, but we'll get an error in the browser like so:

Warning: The `value` prop supplied to <select> must be an array if `multiple` is true.

Check the render method of `Multiselect`.
    in select (created by Multiselect)
    in div (created by Multiselect)
    in Multiselect

Now, if we try to obey the JS error we get the following error in Reason:

This expression has type string but an expression was expected of type list(string)

It would be helpful to be able to handle this with list(string) or array(string), just like ReactJS does it.

Dominant language
Reason
Stars
3.3k
Forks
344
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reasonml/reason-react

All issues in reasonml/reason-react

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.