webstudio-is / webstudio

Open source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports all CSS properties, and can be hosted anywhere, including with us.
https://webstudio.is
GNU Affero General Public License v3.0
4.77k stars 554 forks source link

Native select field with multiple uses duplicate query param #3891

Open johnsicili opened 2 months ago

johnsicili commented 2 months ago

When submitting a form with multiple options selected in a select list, each selection gets a query param key value, but each key is the same. When accessing the value in the system.search var, only the last value shows up.

I think a solution is to comma separate the values and use one key.

Repro:

  1. Add form
  2. Add select
  3. Enable multiple
  4. Submit form
  5. Inspect system.search var and see only one value.

https://github.com/user-attachments/assets/169fed2b-d19c-465c-8601-563dfce0740d

kof commented 2 months ago

Query string is correct, but seems like we are not using URLSearchParams parser, which correctly parses search string, if you put into the browser ?a=1&a=2

const search = new URLSearchParams(location.search)
for (const value of search) {
  console.log(value)
}

Will log:
(2) ['a', '1']
(2) ['a', '2']
kof commented 2 months ago

Turns out we are using a flat object because in expressions the autocompletion wouldn't work otherwise.