[LiveComponent] Fix disabled choices being submitted by live form updates

Author: Amoifr

src/LiveComponent/assets/dist/live_controller.js

@@ -291,6 +291,7 @@ function getValueFromElement(element, valueStore) {
 function setValueOnElement(element, value) {
 	if (element instanceof HTMLInputElement) {
 		if (element.type === "file") return;
+		if ((element.type === "radio" || element.type === "checkbox") && element.disabled) return;
 		if (element.type === "radio") {
 			element.checked = element.value == value;
 			return;

src/LiveComponent/assets/src/dom_utils.ts

@@ -77,6 +77,12 @@ export function setValueOnElement(element: HTMLElement, value: any): void {
             return;
         }
 
+        // a user cannot change a disabled checkbox or radio and browsers never
+        // submit it: the server-rendered state is the source of truth, keep it
+        if ((element.type === 'radio' || element.type === 'checkbox') && element.disabled) {
+            return;
+        }
+
         if (element.type === 'radio') {
             // biome-ignore lint/suspicious/noDoubleEquals: need fuzzy matching
             element.checked = element.value == value;

src/LiveComponent/assets/test/unit/dom_utils.test.ts

@@ -203,6 +203,28 @@ describe('setValueOnElement', () => {
         expect(input.checked).toBeFalsy();
     });
 
+    it('Leaves a disabled checkbox alone: browsers never submit it', () => {
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.checked = true;
+        input.disabled = true;
+        input.value = 'the_checkbox_value';
+
+        setValueOnElement(input, ['other_value']);
+        expect(input.checked).toBeTruthy();
+    });
+
+    it('Leaves a disabled radio alone: browsers never submit it', () => {
+        const input = document.createElement('input');
+        input.type = 'radio';
+        input.checked = true;
+        input.disabled = true;
+        input.value = 'the_radio_value';
+
+        setValueOnElement(input, 'other_value');
+        expect(input.checked).toBeTruthy();
+    });
+
     it('Sets data onto select multiple', () => {
         const select = document.createElement('select');
         select.multiple = true;

src/LiveComponent/src/ComponentWithFormTrait.php

@@ -265,9 +265,33 @@ private function extractFormValues(FormView $formView): array
                 continue;
             }
 
-            // <input type="checkbox">
+            // <input type="checkbox"> - Simulate browser behavior
+            // Browsers never submit disabled controls, so a checked but
+            // disabled checkbox is treated as unchecked.
             if (\array_key_exists('checked', $child->vars)) {
-                $values[$name] = $child->vars['checked'] ? $child->vars['value'] : null;
+                $values[$name] = $child->vars['checked'] && !self::isFieldDisabled($child) ? $child->vars['value'] : null;
+                continue;
+            }
+
+            // Expanded ChoiceType - Simulate browser behavior
+            // The "value" already aggregates the checked checkboxes/radios,
+            // but browsers never submit disabled controls, so the values of
+            // disabled choices are dropped.
+            if ($child->vars['expanded'] ?? false) {
+                $disabledValues = [];
+                foreach ($child->children as $expandedChild) {
+                    if (self::isFieldDisabled($expandedChild)) {
+                        $disabledValues[] = $expandedChild->vars['value'];
+                    }
+                }
+
+                $value = $child->vars['value'];
+                if ($disabledValues) {
+                    $value = \is_array($value)
+                        ? array_values(array_diff($value, $disabledValues))
+                        : (\in_array($value, $disabledValues, true) ? '' : $value);
+                }
+                $values[$name] = $value;
                 continue;
             }
 
@@ -308,6 +332,16 @@ private function extractFormValues(FormView $formView): array
         return $values;
     }
 
+    /**
+     * A field can be disabled at the form level (the "disabled" option) or
+     * only in HTML (a "disabled" attribute, e.g. set through "choice_attr"):
+     * browsers do not submit the control in either case.
+     */
+    private static function isFieldDisabled(FormView $view): bool
+    {
+        return ($view->vars['disabled'] ?? false) || ($view->vars['attr']['disabled'] ?? false);
+    }
+
     private function clearErrorsForNonValidatedFields(FormInterface $form, string $currentPath = ''): void
     {
         if ($form instanceof ClearableErrorsInterface && (!$currentPath || !\in_array($currentPath, $this->validatedFields, true))) {

src/LiveComponent/tests/Fixtures/Form/FormWithManyDifferentFieldsType.php

@@ -121,6 +121,23 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 'expanded' => true,
                 'multiple' => true,
             ])
+            ->add('choice_multiple_disabled', ChoiceType::class, [
+                'choices' => [
+                    'foo' => 1,
+                    'bar' => 2,
+                ],
+                'expanded' => true,
+                'multiple' => true,
+                'choice_attr' => static fn ($choice) => 1 === $choice ? ['disabled' => true] : [],
+            ])
+            ->add('choice_expanded_disabled', ChoiceType::class, [
+                'choices' => [
+                    'foo' => 1,
+                    'bar' => 2,
+                ],
+                'expanded' => true,
+                'choice_attr' => static fn ($choice) => 1 === $choice ? ['disabled' => true] : [],
+            ])
             ->add('select_multiple', ChoiceType::class, [
                 'choices' => [
                     'foo' => 1,
@@ -134,6 +151,9 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ])
             ->add('checkbox', CheckboxType::class)
             ->add('checkbox_checked', CheckboxType::class)
+            ->add('checkbox_checked_disabled', CheckboxType::class, [
+                'disabled' => true,
+            ])
             ->add('file', FileType::class)
             ->add('hidden', HiddenType::class)
             ->add('complexType', ComplexFieldType::class)

src/LiveComponent/tests/Functional/Form/ComponentWithFormTest.php

@@ -192,10 +192,13 @@ public function testHandleCheckboxChanges()
             'choice_required_with_empty_preferred_choices' => 'ok',
             'choice_expanded' => '',
             'choice_multiple' => ['2'],
+            'choice_multiple_disabled' => [],
+            'choice_expanded_disabled' => '',
             'select_multiple' => ['2'],
             'entity' => (string) $id,
             'checkbox' => null,
             'checkbox_checked' => '1',
+            'checkbox_checked_disabled' => null,
             'file' => '',
             'hidden' => '',
             'complexType' => [
@@ -294,6 +297,48 @@ public function testHandleCheckboxChanges()
         ;
     }
 
+    public function testDisabledChoicesAreNeverSubmitted()
+    {
+        CategoryFixtureEntityFactory::createMany(5);
+
+        $mounted = $this->mountComponent(
+            'form_with_many_different_fields_type',
+            [
+                'initialData' => [
+                    // "foo" (value 1) is disabled through "choice_attr"
+                    'choice_multiple_disabled' => [1, 2],
+                ],
+            ]
+        );
+
+        $dehydratedProps = $this->dehydrateComponent($mounted)->getProps();
+
+        // like a browser, the checked but disabled choice is not part of the
+        // values that would be submitted
+        $this->assertSame(['2'], $dehydratedProps['form']['choice_multiple_disabled']);
+
+        // a model update must not resurrect the disabled value either
+        $crawler = $this->browser()
+            ->throwExceptions()
+            ->post('/_components/form_with_many_different_fields_type', [
+                'body' => [
+                    'data' => json_encode([
+                        'props' => $dehydratedProps,
+                        'updated' => ['form' => ['choice_multiple_disabled' => []]],
+                    ]),
+                ],
+            ])
+            ->assertSuccessful()
+            ->crawler()
+        ;
+
+        $dehydratedProps = json_decode(
+            $crawler->filter('div')->first()->attr('data-live-props-value'),
+            true
+        );
+        $this->assertSame([], $dehydratedProps['form']['choice_multiple_disabled']);
+    }
+
     public function testLiveCollectionTypeAddButtonsByDefault()
     {
         $dehydrated = $this->dehydrateComponent($this->mountComponent('form_with_live_collection_type'))->getProps();

src/LiveComponent/tests/Unit/Form/ComponentWithFormTest.php

@@ -34,8 +34,11 @@ public function testFormValues()
         $component = new FormComponentWithManyDifferentFieldsType($formFactory);
         $component->initialData = [
             'choice_multiple' => [2],
+            'choice_multiple_disabled' => [1, 2],
+            'choice_expanded_disabled' => 1,
             'select_multiple' => [2],
             'checkbox_checked' => true,
+            'checkbox_checked_disabled' => true,
         ];
         $component->initializeForm([]);
 
@@ -54,10 +57,15 @@ public function testFormValues()
                 'choice_required_with_empty_preferred_choices' => 'ok',
                 'choice_expanded' => '',
                 'choice_multiple' => ['2'],
+                // disabled choices are never submitted by browsers, so their
+                // values must not appear here even when initially selected
+                'choice_multiple_disabled' => ['2'],
+                'choice_expanded_disabled' => '',
                 'select_multiple' => ['2'],
                 'entity' => (string) $id,
                 'checkbox' => null,
                 'checkbox_checked' => '1',
+                'checkbox_checked_disabled' => null,
                 'file' => '',
                 'hidden' => '',
                 'complexType' => [