[LiveComponent] Support DataModel bindings with LiveComponent modifiers #3302

smnandre · 2026-01-17T13:06:25Z

Hmm.. was this mix of the two syntaxes ever supported by LiveComponent ? I mean, documented etc ?

If not (what i'd say but with not certainety) this is not a bug fix but a feature :)

And one i fear I would be very critical of... as it creates (another) layer of confusion for people.

Do you think there any way we can solve your original core need, that does not require to add another degree of complexity here ?

@smnandre Do you mean

specifically the norender|content:value syntax where both '|' and ':' is used together or

the concept in general of supporting modifiers in the data-model attribute when added as an attribute in the component method?

I could fix 1. by checking that ':' is not present before trying to to extract the property name and amending the test to expect an exception thrown because the property is not present (because it is being returned literally and did not match a property).

More "2" here : I had the impression data-model was either used for child component using the xx:yy syntax, or into single components with modifiers, but not both.

Thanks a lot for taking the time to look at this!

I completely understand the concern about adding complexity, and I also agree that if mixing the two syntaxes was never intended, then treating this as a feature rather than a bugfix is reasonable.

The main reason we experienced this as a bug is not so much the specific behavior, but the inconsistency that emerges from reusing the same data-model attribute in both contexts.

If I write

<select data-model="norender|myProperty">...</select>

this works exactly as documented. But if I wrap that same <select> as the root element of a Twig component and use:

<twig:MySelectComponent data-model="norender|myProperty" /> ... or ... {{ component('MySelectComponent', { dataModel: 'content', }) }}

the exact same syntax suddenly fails, even though from my perspective it feels like the same operation, just composed.

This is where my surprise comes from: not that modifiers exist, but that the same attribute value behaves differently depending on whether it’s applied directly to a DOM element or passed through a Twig component. If these two concepts were never meant to interact, then reusing data-model for both makes that distinction very hard to discover or reason about as a developer.

Since the different behaviour is not explicitly mentioned in the documentation, I believed this was a bug.

That said, I absolutely defer to the project’s direction here. If it's preferred to not support modifiers in Twig component bindings, I think documenting that limitation (or even failing fast with a clearer error) would already help a lot.
The approach in the PR felt like the least intrusive way to align the behavior with user expectations.

We can work around this issue in a couple of ways, one of them by manually adding modifiers in our Twig component like I describe in #3152 (comment)

Happy to adjust the PR in whatever direction makes the most sense for Symfony UX or contributing to explicitly documenting the behavior, and thanks again for the guidance! :)

-Original file line number
+Diff line change
@@ Expand Up / @@ -65,6 +65,12 @@ public function onPreMount(PreMountEvent $event): void @@
                 $childModel = $binding['child'];
                 $parentModel = $binding['parent'];
+                // If the data-model attribute contains LiveComponent-specific modifiers, extract the actual property name
+                if (str_contains($parentModel, '|')) {
+                    $parentModelParts = explode('|', $parentModel);
+                    $parentModel = end($parentModelParts);
+                }
                 $data[$childModel] = $this->propertyAccessor->getValue($parentMountedComponent->getComponent(), $parentModel);
             }
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -0,0 +1,22 @@
+    <?php
+    /*
+     * This file is part of the Symfony package.
+     *
+     * (c) Fabien Potencier <fabien@symfony.com>
+     *
+     * For the full copyright and license information, please view the LICENSE
+     * file that was distributed with this source code.
+     */
+    namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+    use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+    use Symfony\UX\LiveComponent\Attribute\LiveProp;
+    use Symfony\UX\LiveComponent\DefaultActionTrait;
+    #[AsLiveComponent('parent_component_data_model_with_modifiers')]
+    final class ParentComponentDataModelWithModifiers
+    {
+        use DefaultActionTrait;
+    }

-Original file line number
+Diff line change
@@ -0,0 +1,25 @@
+    <?php
+    /*
+     * This file is part of the Symfony package.
+     *
+     * (c) Fabien Potencier <fabien@symfony.com>
+     *
+     * For the full copyright and license information, please view the LICENSE
+     * file that was distributed with this source code.
+     */
+    namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+    use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+    use Symfony\UX\LiveComponent\Attribute\LiveProp;
+    use Symfony\UX\LiveComponent\DefaultActionTrait;
+    #[AsLiveComponent('parent_component_data_model_with_modifiers_2')]
+    final class ParentComponentDataModelWithModifiers2
+    {
+        use DefaultActionTrait;
+        #[LiveProp(writable: true)]
+        public string $content;
+    }

-Original file line number
+Diff line change
@@ -0,0 +1,25 @@
+    <?php
+    /*
+     * This file is part of the Symfony package.
+     *
+     * (c) Fabien Potencier <fabien@symfony.com>
+     *
+     * For the full copyright and license information, please view the LICENSE
+     * file that was distributed with this source code.
+     */
+    namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+    use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+    use Symfony\UX\LiveComponent\DefaultActionTrait;
+    #[AsLiveComponent('parent_form_component_with_modifiers')]
+    final class ParentFormComponentWithModifiers
+    {
+        use DefaultActionTrait;
+        public ?string $content = null;
+        public ?string $content2 = null;
+    }

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		{% component parent_component_data_model_with_modifiers_2 with { content: 'default content on mount' } %}
		{% endcomponent %}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[LiveComponent] Support DataModel bindings with LiveComponent modifiers #3302

Uh oh!

Diff view

Diff view

There are no files selected for viewing

smnandre Jan 17, 2026

Uh oh!

Wertisdk Jan 19, 2026

Uh oh!

smnandre Jan 20, 2026

Uh oh!

Wertisdk Jan 21, 2026

Uh oh!

Uh oh!

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		{{ component('textarea_component', { dataModel: 'norender\|content' }) }}
		{% component input_component with { dataModel: 'norender\|content' } %}{% endcomponent %}

-Original file line number
+Diff line change
@@ -0,0 +1,11 @@
+    <div>
+        {{ component('textarea_component', {
+            'data-model': 'norender|content:value'
+        }) }}
+    </div>
+    <div>
+        {{ component('textarea_component', {
+            'dataModel': 'norender|content2:value'
+        }) }}
+    </div>

-Original file line number
+Diff line change
@@ Expand Up @@
             $this->assertStringContainsString('<textarea data-model="content">default content on mount</textarea>', $html);
             $this->assertStringContainsString('<input data-model="content" value="default content on mount" />', $html);
         }
+        public function testDataModelPropsWithModifiersAreSharedToChild()
+        {
+            /** @var ComponentRenderer $renderer */
+            $renderer = self::getContainer()->get('ux.twig_component.component_renderer');
+            $html = $renderer->createAndRender('parent_form_component_with_modifiers', [
+                'content' => 'Hello data-model!',
+                'content2' => 'Value for second child',
+                'attributes' => ['id' => 'dummy-live-id'],
+            ]);
+            // Verify that the data-model attributes include the "norender" modifier and that values are passed correctly
+            $this->assertStringContainsString('<textarea data-model="norender|content:value">Hello data-model!</textarea>', $html);
+            $this->assertStringContainsString('<textarea data-model="norender|content2:value">Value for second child</textarea>', $html);
+        }
+        public function testDataModelPropsWithModifiersAreAvailableInEmbeddedComponents()
+        {
+            $templateName = 'components/parent_component_data_model_with_modifiers.html.twig';
+            $obscuredName = '684c45bf85d3461dbe587407892e59d9';
+            $this->addTemplateMap($obscuredName, $templateName);
+            /** @var ComponentRenderer $renderer */
+            $renderer = self::getContainer()->get('ux.twig_component.component_renderer');
+            $html = $renderer->createAndRender('parent_component_data_model_with_modifiers', [
+                'attributes' => ['id' => 'dummy-live-id'],
+            ]);
+            // Verify that the data-model attributes include the "norender" modifier and that values are passed correctly
+            $this->assertStringContainsString('<textarea data-model="norender|content">default content on mount</textarea>', $html);
+            $this->assertStringContainsString('<input data-model="norender|content" value="default content on mount" />', $html);
+        }
     }

Uh oh!

[LiveComponent] Support DataModel bindings with LiveComponent modifiers #3302

Are you sure you want to change the base?

Uh oh!

[LiveComponent] Support DataModel bindings with LiveComponent modifiers #3302

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

smnandre Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Wertisdk Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

smnandre Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Wertisdk Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!