formio.js icon indicating copy to clipboard operation
formio.js copied to clipboard

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

Open pboucher1960 opened this issue 10 months ago • 3 comments

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.

pboucher1960 avatar Apr 18 '24 12:04 pboucher1960