Closed theetrain closed 1 year ago
Thanks @metonym, though I think I had a new realization: if I conditionally hide the ListBox using display: none
CSS, its checkbox inputs will still be included as part of the submitted form data:
Reference:
Refactor:
- {#if open}
+ <div class:hidden="{!open}">
<ListBoxMenu
aria-label="{ariaLabel}"
id="{id}"
aria-multiselectable="true"
>
<!-- stuff -->
+<style>
+ .hidden {
+ display: none;
+ }
+</style>
Minimal demo: https://www.sveltelab.dev/ibxj8ki83lee147
This is great for progressive enhancement down the road, once the popover API becomes stable. With that said, should I refactor to use the above logic? I can probably remove the new props as well and have my own project make use of the checkboxes; leveraging itemToInput
to render custom name
attributes for my needs.
What do you think?
That approach seems valid.
I'll admit that for one-line style changes, I have a slight preference for using the style:
directive.
Fixes #1742
MultiSelect up til now wasn't rendering hidden inputs in order to be submittable within a
<form>
. With this enhancement:MultiSelect renders all items as<input type="hidden" name="some-id" value="true" />
usingvalue="true"
for checked items andvalue="false"
for unchecked items by default.New propselectedOnly
only renders hidden inputs for user-selected items.New propcombineValues
renders a single hidden input with comma-separated values, or using a consumer-provided delimiter.itemToInput
is enhanced to perform double duty for user-visible checkboxes as well as the hidden inputs, mainly to help overridename
andvalue
attributes among the hidden inputs.Feature (3) was a personal need in order to submit an array of values within a form, but I felt the default behaviour should be checkbox-like as per point (1) assuming that's what consumers of MultiSelect would expect.See included documentation for more examples.