<sl-select> with "muiltiple" only sends a single item to FormData, when more than one is selected.

[ourson66]

Describe the bug

I'm using an with multiple values, this is how it's defined:

<sl-select name="rx_colorrestrict" label="Color Restriction:" value="rx_pattern" multiple clearable>
    <sl-option value="rx_pattern">No Patterns</sl-option>
    <sl-option value="rx_metallic">No Metallics</sl-option>
</sl-select>

If there are multiple values selected, as it says in the documentation, I pass a space-delimited string of values in the "value" attribute, which works. The documentation is slightly confusing about the difference between the single space-delimited string used to set the value attribute, vs. the value property, which it says will return an array, "if accessed via javascript" ... (shrug) ... well on the server I actually need it to be a space-delimited string when it arrives in the POST request to the server, and I'm not doing any javascript with the <sl-select>, just wrapping a form around it with "method='post'" and "action='some url'", and placing a submit button in there, and just submitting the form. This seems like one of those "it should just work" sort of scenarios.

To Reproduce

Steps to reproduce the behavior:

1. create a standard html <form> with method="post" and action="some.php", containing the <sl-select> above, & submit button
2. Create the server side "some.php" that can just contain <?php var_dump($_POST); ?>
3. Submit the form, and check out the output.
4. Here's what I get:

array(1) {
  ["rx_colorrestrict"] => string(11) "rx_metallic"
}

As you can see, there's only 1 item showing, where there should be two, because both of the items in the sl-select were showing on the screen as being selected.

Browser / OS

• OS: Mac
• Browser: Chrome
• Browser version: latest

Additional information

Provide any additional information about the bug here.

[ourson66]

If, before I submit the form, look at the sl-select's value in the DevTools window, console.log(mySelect.value);, I do see a two-item array containing both items [ "rx_pattern", "rx_metallic"]. Interestingly, it's the LAST one which gets sent via the form to the server.

[claviska]

Shoelace is designed to submit form data the same way as native controls. You can verify this behavior by comparing it to a native <select>:

https://codepen.io/claviska/pen/ExMjmgw?editors=1000

Note the query string after submission:

?native=option-1&native=option-2&shoelace=option-1&shoelace=option-2

It's been awhile but, with PHP, I believe you need to append square brackets to the name to tell PHP to parse it as an array, otherwise you'll only get the last selected value.

<sl-select name="rx_colorrestrict[]" ... >

[ourson66]

Oh bollox ... I dimly remember something about using the square brackets [] to get PHP to handle arrays of values. Thanks for the quick response, and sorry for the erroneous report.