Skip to content

Select component with a "Widget type" of "HTML 5" and "Multiple Values" set to true does not allow for multiple values to be selected #5572

@pboucher1960

Description

@pboucher1960

Describe the bug
When adding a "Select" component to a form with a "Widget type" set to "HTML 5" and "Multiple Values" set to true, it's not possible to select multiple values from the drop down list. It works fine when the "Widget type" is set to "ChoicesJS" and selecting from the dropdown list adds the selected value in the components first line as a removable token.

Version/Branch
Tested in both 4.16.0 and 4.17.0-rc.2

To Reproduce
Steps to reproduce the behavior:

  1. Create form.
  2. Add a "Select" component, in the "Display" property tab set "Widget Type" to "HTML 5", in the "Data" property tab set "Multiple Values" to true and add at least two "Data Source Values".
  3. Render the form and try to select one value from the list.
  4. Try to select multiple values from the list.

Expected behavior
Step 3: The selected item should be displayed in the first line of the component.
Step 4: All the selected items should be displayed in the first line of the component.

Additional context
See the following sandbox: 662025581f38b9eaad48dc3a for a sample in which the "Select" component is tested with all the possible permutations of "Widget Type" and "Multiple Values" accompanied by a TextField on the right to show the actual selected values from each Select component. We can see that in the fouth row, the one that shows the actual problem, selecting an item in the list would register a value, but it's not possible to select multiple value as expected.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions