fix: avoid readonly form prop writes in preview controls

Author: unadlib

packages/checkbox/src/index.tsx

@@ -371,7 +371,7 @@ function CheckboxBubbleInput(props: ScopedProps<CheckboxBubbleInputProps>): Fict
       'aria-hidden': true,
       defaultChecked: prop(context.defaultChecked),
       disabled: prop(context.disabled),
-      form: prop(context.form),
+      'attr:form': prop(context.form),
       name: prop(context.name),
       required: prop(context.required),
       value: prop(context.value),

packages/radio-group/src/radio-group.tsx

@@ -373,6 +373,7 @@ function RadioGroupItem(props: ScopedProps<RadioGroupItemProps>): FictNode {
           context.setCurrentTabStop(value)
         },
       ),
+      value,
     },
   ) as unknown as ScopedProps<RadioProps>
 

packages/radio-group/src/radio.tsx

@@ -83,8 +83,11 @@ function Radio(props: ScopedProps<RadioProps>): FictNode {
   const {
     __scopeRadio,
     checked: checkedProp = false,
+    form: formInput,
+    name: nameInput,
     required,
     onCheck,
+    value: valueInput,
     ...radioProps
   } = props
   const button = createSignal<HTMLButtonElement | null>(null)
@@ -97,13 +100,13 @@ function Radio(props: ScopedProps<RadioProps>): FictNode {
   const requiredValue = () =>
     required === undefined ? undefined : Boolean(readValue(required as MaybeAccessor<boolean | undefined>))
   const form = () =>
-    props.form === undefined ? undefined : readValue(props.form as MaybeAccessor<string | undefined>)
+    formInput === undefined ? undefined : readValue(formInput as MaybeAccessor<string | undefined>)
   const name = () =>
-    props.name === undefined ? undefined : readValue(props.name as MaybeAccessor<string | undefined>)
+    nameInput === undefined ? undefined : readValue(nameInput as MaybeAccessor<string | undefined>)
   const value = () =>
-    props.value === undefined
+    valueInput === undefined
       ? 'on'
-      : (readValue(props.value as MaybeAccessor<JSX.IntrinsicElements['input']['value'] | undefined>) ??
+      : (readValue(valueInput as MaybeAccessor<JSX.IntrinsicElements['input']['value'] | undefined>) ??
           'on')
   const hasConsumerStoppedPropagationRef = { current: false }
   const isFormControl = () => {
@@ -123,8 +126,6 @@ function Radio(props: ScopedProps<RadioProps>): FictNode {
       __scopeRadio: undefined,
       checked: undefined,
       disabled: prop(() => (disabled() ? true : undefined)),
-      form: prop(form),
-      name: prop(name),
       onCheck: undefined,
       ref: undefined,
       required: undefined,
@@ -153,11 +154,11 @@ function Radio(props: ScopedProps<RadioProps>): FictNode {
         checked={checked}
         control={button}
         disabled={props.disabled}
-        form={props.form}
-        name={props.name}
+        form={formInput}
+        name={nameInput}
         required={required}
         style={{ transform: 'translateX(-100%)' }}
-        value={props.value}
+        value={valueInput}
       />
     ) : null) as unknown as FictNode
 
@@ -206,6 +207,7 @@ function RadioIndicator(props: ScopedProps<RadioIndicatorProps>): FictNode {
 RadioIndicator.displayName = INDICATOR_NAME
 
 function RadioBubbleInput(props: RadioBubbleInputProps): FictNode {
+  const { form: formProp, ...inputRestProps } = props
   const ref = createSignal<HTMLInputElement | null>(null)
   const composedRefs = useComposedRefs(
     props.ref as PossibleRef<HTMLInputElement>,
@@ -236,7 +238,7 @@ function RadioBubbleInput(props: RadioBubbleInputProps): FictNode {
   })
 
   const inputProps = mergeProps(
-    () => props as Record<string, unknown>,
+    () => inputRestProps as Record<string, unknown>,
     {
       'aria-hidden': true,
       bubbles: undefined,
@@ -245,8 +247,8 @@ function RadioBubbleInput(props: RadioBubbleInputProps): FictNode {
       disabled: prop(() =>
         props.disabled === undefined ? undefined : Boolean(readValue(props.disabled as MaybeAccessor<unknown>)),
       ),
-      form: prop(() =>
-        props.form === undefined ? undefined : readValue(props.form as MaybeAccessor<string | undefined>),
+      'attr:form': prop(() =>
+        formProp === undefined ? undefined : readValue(formProp as MaybeAccessor<string | undefined>),
       ),
       name: prop(() =>
         props.name === undefined ? undefined : readValue(props.name as MaybeAccessor<string | undefined>),

packages/radio-group/test/index.test.tsx

@@ -143,4 +143,33 @@ describe('@fictjs/radio-group', () => {
     expect(item.disabled).toBe(true)
     expect(item.getAttribute('data-disabled')).toBe('')
   })
+
+  it('keeps form association props on the hidden radio input instead of the button', async () => {
+    const container = document.createElement('div')
+    document.body.append(container)
+
+    mount(() => (
+      <>
+        <form id="billing-form" />
+        <RadioGroup name="plan" required defaultValue="pro">
+          <RadioGroupItem data-testid="item" form="billing-form" value="pro">
+            Pro
+          </RadioGroupItem>
+        </RadioGroup>
+      </>
+    ), container)
+
+    await waitForUpdates()
+
+    const button = container.querySelector('[data-testid="item"]') as HTMLButtonElement
+    const input = container.querySelector('input[type="radio"]') as HTMLInputElement
+
+    expect(button.hasAttribute('form')).toBe(false)
+    expect(button.hasAttribute('name')).toBe(false)
+    expect(button.hasAttribute('required')).toBe(false)
+    expect(input.getAttribute('form')).toBe('billing-form')
+    expect(input.getAttribute('name')).toBe('plan')
+    expect(input.hasAttribute('required')).toBe(true)
+    expect(input.value).toBe('pro')
+  })
 })

packages/slider/src/slider.tsx

@@ -779,6 +779,7 @@ function SliderThumb(props: ScopedProps<SliderThumbProps>): FictNode {
 SliderThumb.displayName = THUMB_NAME
 
 function SliderBubbleInput(props: ScopedProps<SliderBubbleInputProps>): FictNode {
+  const { form: formProp, ...inputRestProps } = props
   const ref = createSignal<HTMLInputElement | null>(null)
   const previousValue = usePrevious(props.value)
 
@@ -803,15 +804,15 @@ function SliderBubbleInput(props: ScopedProps<SliderBubbleInputProps>): FictNode
   })
 
   const inputProps = mergeProps(
-    () => props as Record<string, unknown>,
+    () => inputRestProps as Record<string, unknown>,
     {
       __scopeSlider: undefined,
       defaultValue: prop(() => {
         const nextValue = readValue(props.value)
         return nextValue === undefined ? '' : String(nextValue)
       }),
-      form: prop(() =>
-        props.form === undefined ? undefined : readValue(props.form as MaybeAccessor<string | undefined>),
+      'attr:form': prop(() =>
+        formProp === undefined ? undefined : readValue(formProp as MaybeAccessor<string | undefined>),
       ),
       name: prop(() =>
         props.name === undefined ? undefined : readValue(props.name as MaybeAccessor<string | undefined>),

packages/switch/src/index.tsx

@@ -80,24 +80,34 @@ function getState(checked: boolean): 'checked' | 'unchecked' {
 }
 
 function Switch(props: ScopedProps<SwitchProps>): FictNode {
+  const {
+    __scopeSwitch,
+    checked: checkedInput,
+    defaultChecked: defaultCheckedInput,
+    form: formInput,
+    name: nameInput,
+    onCheckedChange,
+    required: requiredInput,
+    ...buttonProps
+  } = props
   const button = createSignal<HTMLButtonElement | null>(null)
   const bubbleInput = createSignal<HTMLInputElement | null>(null)
   const isFormControl = createSignal(true)
   const checkedProp = () =>
-    props.checked === undefined ? undefined : readValue(props.checked as MaybeAccessor<boolean | undefined>)
+    checkedInput === undefined ? undefined : readValue(checkedInput as MaybeAccessor<boolean | undefined>)
   const defaultChecked = () =>
-    props.defaultChecked === undefined ? false : (readValue(props.defaultChecked) ?? false)
+    defaultCheckedInput === undefined ? false : (readValue(defaultCheckedInput) ?? false)
   const required = () =>
-    props.required === undefined ? undefined : readValue(props.required as MaybeAccessor<boolean | undefined>)
+    requiredInput === undefined ? undefined : readValue(requiredInput as MaybeAccessor<boolean | undefined>)
   const disabled = () => Boolean(readValue(props.disabled as MaybeAccessor<unknown>))
   const name = () =>
-    props.name === undefined ? undefined : readValue(props.name as MaybeAccessor<string | undefined>)
+    nameInput === undefined ? undefined : readValue(nameInput as MaybeAccessor<string | undefined>)
   const value = () =>
     props.value === undefined
       ? 'on'
       : (readValue(props.value as MaybeAccessor<SwitchValue | undefined>) ?? 'on')
   const form = () =>
-    props.form === undefined ? undefined : readValue(props.form as MaybeAccessor<string | undefined>)
+    formInput === undefined ? undefined : readValue(formInput as MaybeAccessor<string | undefined>)
   const composedRefs = useComposedRefs(
     props.ref as PossibleRef<HTMLButtonElement>,
     (node) => button(node),
@@ -106,7 +116,7 @@ function Switch(props: ScopedProps<SwitchProps>): FictNode {
     prop: checkedProp,
     defaultProp: defaultChecked,
     caller: SWITCH_NAME,
-    ...(props.onCheckedChange ? { onChange: props.onCheckedChange } : {}),
+    ...(onCheckedChange ? { onChange: onCheckedChange } : {}),
   }
   const [checked, setChecked] = useControllableState<boolean>(controllableStateProps)
   let hasConsumerStoppedPropagation = false
@@ -175,17 +185,12 @@ function Switch(props: ScopedProps<SwitchProps>): FictNode {
       'data-state': prop(() => getState(checked())),
       'data-disabled': prop(() => (disabled() ? '' : undefined)),
     },
-    () => props as Record<string, unknown>,
+    () => buttonProps as Record<string, unknown>,
     {
       __scopeSwitch: undefined,
-      checked: undefined,
-      defaultChecked: undefined,
-      form: undefined,
-      name: undefined,
       onCheckedChange: undefined,
       onClick: handleClick,
       ref: undefined,
-      required: undefined,
       value: prop(value),
     },
   )
@@ -206,7 +211,7 @@ function Switch(props: ScopedProps<SwitchProps>): FictNode {
     ) : null) as unknown as FictNode
 
   return (
-    <SwitchProvider scope={props.__scopeSwitch} checked={checked} disabled={disabled}>
+    <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled}>
       <>
         <Primitive.button {...switchProps} ref={composedRefs} />
         {bubbleInputNode}
@@ -234,19 +239,20 @@ function SwitchThumb(props: ScopedProps<SwitchThumbProps>): FictNode {
 SwitchThumb.displayName = THUMB_NAME
 
 function SwitchBubbleInput(props: SwitchBubbleInputProps): FictNode {
+  const { form: formProp, ...inputRestProps } = props
   const controlSize = useSize(props.control)
 
   const inputProps = mergeProps(
-    () => props as Record<string, unknown>,
+    () => inputRestProps as Record<string, unknown>,
     {
       'aria-hidden': true,
       checked: prop(props.checked),
       control: undefined,
       bubbles: undefined,
       children: undefined,
       disabled: prop(() => (props.disabled === undefined ? undefined : Boolean(readValue(props.disabled)))),
-      form: prop(() =>
-        props.form === undefined ? undefined : readValue(props.form as MaybeAccessor<string | undefined>),
+      'attr:form': prop(() =>
+        formProp === undefined ? undefined : readValue(formProp as MaybeAccessor<string | undefined>),
       ),
       name: prop(() =>
         props.name === undefined ? undefined : readValue(props.name as MaybeAccessor<string | undefined>),

packages/switch/test/index.test.tsx

@@ -131,6 +131,33 @@ describe('@fictjs/switch', () => {
     expect(input.checked).toBe(true)
   })
 
+  it('keeps form association props on the hidden input instead of the button', async () => {
+    const container = document.createElement('div')
+    document.body.append(container)
+
+    render(() => (
+      <>
+        <form id="settings-form" />
+        <Root form="settings-form" name="airplane-mode" required value="enabled">
+          <Thumb />
+        </Root>
+      </>
+    ), container)
+
+    await flushEffects()
+
+    const button = container.querySelector('button') as HTMLButtonElement
+    const input = container.querySelector('input[type="checkbox"]') as HTMLInputElement
+
+    expect(button.hasAttribute('form')).toBe(false)
+    expect(button.hasAttribute('name')).toBe(false)
+    expect(button.hasAttribute('required')).toBe(false)
+    expect(input.getAttribute('form')).toBe('settings-form')
+    expect(input.getAttribute('name')).toBe('airplane-mode')
+    expect(input.getAttribute('value')).toBe('enabled')
+    expect(input.hasAttribute('required')).toBe(true)
+  })
+
   it('forwards ref mount and cleanup through the switch root', async () => {
     const calls: Array<string | null> = []
     const container = document.createElement('div')