rgossiaux · NoelOConnell · Oct 6, 2022
diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte
@@ -61,6 +61,8 @@
     horizontal?: boolean;
     /** The selected value */
     value?: StateDefinition["value"];
+    /** The name used when using this component inside a form. */
+    name?: string;
   };
 </script>
 
@@ -80,6 +82,8 @@
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import Render from "$lib/utils/Render.svelte";
   import type { TPassThroughProps } from "$lib/types";
+  import Hidden, { Features as HiddenFeatures } from "$lib/internal/Hidden.svelte";
+  import { objectToFormEntries } from "$lib/utils/form";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;
@@ -90,6 +94,7 @@
   export let disabled = false;
   export let horizontal = false;
   export let value: StateDefinition["value"];
+  export let name: string | null = null;
 
   /***** Events *****/
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
@@ -276,6 +281,21 @@
 </script>
 
 <svelte:window on:mousedown={handleMousedown} />
+
+{#if name != null && value != null}
+  {@const options = objectToFormEntries({ [name]: value })}
+  {#each options as [optionName, optionValue], index (index)}      
+    <Hidden
+      features={HiddenFeatures.Hidden}
+      as="input"
+      type="hidden"
+      hidden
+      readonly
+      name={optionName}
+      value={optionValue}
+    />
+  {/each}
+{/if}  
 <Render
   {...$$restProps}
   {as}
@@ -284,4 +304,4 @@
   name={"Listbox"}
 >
   <slot {...slotProps} />
-</Render>
+</Render>
diff --git a/src/lib/components/listbox/listbox.test.ts b/src/lib/components/listbox/listbox.test.ts
@@ -3692,3 +3692,157 @@ describe('Mouse interactions', () => {
     })
   )
 })
+
+describe('Form compatibility', () => {
+  it('should be possible to submit a form with a value', async () => {
+    let submitFn = jest.fn();
+
+    render(svelte`
+      <script>
+        let value = null
+      </script>         
+
+      <form on:submit={(event) => {
+        event.preventDefault()
+        submitFn([...new FormData(event.currentTarget).entries()])
+      }}>        
+        <Listbox value={value} on:change={(e) => (value = e.detail)} name="delivery">
+          <ListboxButton>Trigger</ListboxButton>
+          <ListboxOptions>
+            <ListboxOption value="pickup">Pickup</ListboxOption>
+            <ListboxOption value="home-delivery">Home delivery</ListboxOption>
+            <ListboxOption value="dine-in">Dine in</ListboxOption>            
+          </ListboxOptions>
+        </Listbox>
+        <button type="submit">Submit</button>
+      </form>
+    `);    
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([]) // no data
+
+    // Open listbox again
+    await click(getListboxButton())
+
+    // Choose home delivery
+    await click(getByText('Home delivery'))
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([['delivery', 'home-delivery']])
+
+    // Open listbox again
+    await click(getListboxButton())
+
+    // Choose pickup
+    await click(getByText('Pickup'))
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([['delivery', 'pickup']])
+  })
+
+  it('should be possible to submit a form with a complex value object', async () => {
+    let submitFn = jest.fn();
+
+    render(svelte`
+      <script>
+        let options = [
+          {
+            id: 1,
+            value: 'pickup',
+            label: 'Pickup',
+            extra: { info: 'Some extra info' },
+          },
+          {
+            id: 2,
+            value: 'home-delivery',
+            label: 'Home delivery',
+            extra: { info: 'Some extra info' },
+          },
+          {
+            id: 3,
+            value: 'dine-in',
+            label: 'Dine in',
+            extra: { info: 'Some extra info' },
+          },
+        ]
+
+        let value = options[0]
+      </script>         
+
+      <form on:submit={(event) => {
+        event.preventDefault()
+        submitFn([...new FormData(event.currentTarget).entries()])
+      }}>        
+        <Listbox value={value} on:change={(e) => (value = e.detail)} name="delivery">
+          <ListboxButton>Trigger</ListboxButton>
+          <ListboxOptions>
+            {#each options as option}
+              <ListboxOption value={option}>{option.label}</ListboxOption>              
+            {/each}
+          </ListboxOptions>
+        </Listbox>
+        <button type="submit">Submit</button>
+      </form>
+    `);        
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([
+      ['delivery[id]', '1'],
+      ['delivery[value]', 'pickup'],
+      ['delivery[label]', 'Pickup'],
+      ['delivery[extra][info]', 'Some extra info'],
+    ])
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Choose home delivery
+    await click(getByText('Home delivery'))
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([
+      ['delivery[id]', '2'],
+      ['delivery[value]', 'home-delivery'],
+      ['delivery[label]', 'Home delivery'],
+      ['delivery[extra][info]', 'Some extra info'],
+    ])
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Choose pickup
+    await click(getByText('Pickup'))
+
+    // Submit the form again
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submitFn).lastCalledWith([
+      ['delivery[id]', '1'],
+      ['delivery[value]', 'pickup'],
+      ['delivery[label]', 'Pickup'],
+      ['delivery[extra][info]', 'Some extra info'],
+    ])
+  })
+})
diff --git a/src/lib/components/radio-group/RadioGroup.svelte b/src/lib/components/radio-group/RadioGroup.svelte
@@ -52,6 +52,8 @@
     value: StateDefinition["value"];
     /** Whether the `RadioGroup` and all of its `RadioGroupOption`s are disabled */
     disabled?: boolean;
+    /** The name used when using this component inside a form. */
+    name?: string;
   };
 </script>
 
@@ -63,6 +65,8 @@
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import Render from "$lib/utils/Render.svelte";
   import type { TPassThroughProps } from "$lib/types";
+  import Hidden, { Features as HiddenFeatures } from "$lib/internal/Hidden.svelte";
+  import { objectToFormEntries } from "$lib/utils/form";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;
@@ -72,6 +76,7 @@
   export let use: HTMLActionArray = [];
   export let value: StateDefinition["value"];
   export let disabled = false;
+  export let name: string | null = null;
 
   /***** Events *****/
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
@@ -223,6 +228,21 @@
 
 <DescriptionProvider name="RadioGroupDescription" let:describedby>
   <LabelProvider name="RadioGroupLabel" let:labelledby>
+    {#if name != null && value != null}
+      {@const options = objectToFormEntries({ [name]: value })}
+      {#each options as [optionName, optionValue], index (index)}      
+        <Hidden
+          features={HiddenFeatures.Hidden}
+          as="input"
+          type="hidden"
+          hidden
+          readonly
+          name={optionName}
+          value={optionValue}
+        />
+      {/each}
+    {/if}  
+
     <Render
       {...{ ...$$restProps, ...propsWeControl }}
       {as}

diff --git a/src/lib/components/radio-group/radio-group.test.ts b/src/lib/components/radio-group/radio-group.test.ts
@@ -771,3 +771,45 @@ describe('Mouse interactions', () => {
     expect(changeFn).toHaveBeenCalledTimes(1)
   })
 })
+
+describe("`Enter`", () => {
+  it("should submit the form on `Enter`", async () => {    
+    let submitFn = jest.fn();
+
+    render(svelte`   
+      <script>
+        let selected = "home-delivery"
+      </script>
+
+      <form on:submit={(event) => {
+        event.preventDefault()
+        submitFn([...new FormData(event.currentTarget).entries()])
+      }}>
+        <RadioGroup value={selected} name="option" on:change={(e) => selected = e.detail}>
+          <RadioGroupLabel>Pizza Delivery</RadioGroupLabel>
+          <RadioGroupOption value="pickup">Pickup</RadioGroupOption>
+          <RadioGroupOption value="home-delivery">Home delivery</RadioGroupOption>
+          <RadioGroupOption value="dine-in">Dine in</RadioGroupOption>
+        </RadioGroup>
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+    // Submit the form
+    await click(getByText('Submit'))   
+
+    // Verify the form was submitted with the home-delivery option
+    expect(submitFn).toHaveBeenCalledTimes(1);
+    expect(submitFn).toHaveBeenCalledWith([["option", "home-delivery"]]);
+
+    // Select the Pickup option
+    await click(getByText("Pickup"));
+
+    // Submit the form
+    await click(getByText('Submit'))   
+
+    // Verify the form was submitted with the pickup option
+    expect(submitFn).toHaveBeenCalledTimes(2);
+    expect(submitFn).toHaveBeenCalledWith([["option", "pickup"]]);
+  });
+});
diff --git a/src/lib/components/switch/Switch.svelte b/src/lib/components/switch/Switch.svelte
@@ -5,6 +5,10 @@
   > = TPassThroughProps<TSlotProps, TAsProp, "button"> & {
     /** Whether the switch is checked */
     checked: boolean;
+    /** The name used when using this component inside a form. */
+    name?: string;
+    /** The value used when using this component inside a form, if it is checked. */
+    value?: string;
   };
 </script>
 
@@ -22,6 +26,7 @@
   import Render from "$lib/utils/Render.svelte";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
   import type { TPassThroughProps } from "$lib/types";
+  import Hidden, { Features as HiddenFeatures } from "$lib/internal/Hidden.svelte";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;
@@ -30,6 +35,8 @@
   export let as: SupportedAs = "button";
   export let use: HTMLActionArray = [];
   export let checked = false;
+  export let name: string | null = null;
+  export let value: string | null = null;
 
   /***** Events *****/
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
@@ -81,6 +88,18 @@
   $: slotProps = { checked };
 </script>
 
+{#if name != null && checked}
+  <Hidden
+    features={HiddenFeatures.Hidden}
+    as="input"
+    type="checkbox"
+    hidden
+    readonly
+    {name}
+    bind:checked
+    bind:value
+  />
+{/if}
 <!-- TODO: I'm sure there's a better way of doing this -->
 {#if switchStore}
   <Render