bug #261 [Twig][Live] null attribute values render without value (ie autofocus) (kbond)

This PR was merged into the 2.x branch.

Discussion
----------

[Twig][Live] null attribute values render without value (ie autofocus)

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Tickets       | n/a
| License       | MIT

Ref: #220 (comment)

A null attribute value renders without the _value_:

```twig
{# templates/components/my_component.html.twig #}
<input{{ attributes}}/>

{# render component #}
{{ component('my_component', { type: 'text', value: '', autofocus: null }) }}

{# renders as: #}
<input type="text" value="" autofocus/>
```

**TODO:**
- [x] `null` vs `''` (#220 (comment))
- [x] attributes without a value like `autofocus` (#220 (comment))
- [x] LiveComponent dehydration/hydration issues (`null` values are lost during re-render) - solved in #264

Commits
-------

c1e484b [Twig][Live] null attribute values render without value (ie autofocus)

Author: weaverryan

src/LiveComponent/tests/Integration/LiveComponentHydratorTest.php

@@ -274,7 +274,7 @@ public function testCanDehydrateAndHydrateComponentsWithAttributes(): void
         $factory = self::getContainer()->get('ux.twig_component.component_factory');
 
         /** @var ComponentWithAttributes $component */
-        $component = $factory->create('with_attributes', $attributes = ['class' => 'foo']);
+        $component = $factory->create('with_attributes', $attributes = ['class' => 'foo', 'value' => null]);
 
         $this->assertSame($attributes, $component->attributes->all());
 

src/TwigComponent/src/ComponentAttributes.php

@@ -30,7 +30,13 @@ public function __toString(): string
     {
         return array_reduce(
             array_keys($this->attributes),
-            fn (string $carry, string $key) => sprintf('%s %s="%s"', $carry, $key, $this->attributes[$key]),
+            function (string $carry, string $key) {
+                if (null === $this->attributes[$key]) {
+                    return "{$carry} {$key}";
+                }
+
+                return sprintf('%s %s="%s"', $carry, $key, $this->attributes[$key]);
+            },
             ''
         );
     }

src/TwigComponent/src/HasAttributesTrait.php

@@ -45,8 +45,8 @@ public function mountAttributes(array $data): array
         }
 
         foreach ($data as $key => $value) {
-            if (!is_scalar($value)) {
-                throw new \LogicException(sprintf('Unable to use "%s" (%s) as an attribute. Attributes must be scalar. If you meant to mount this value on your component, make sure this is a writable property.', $key, get_debug_type($value)));
+            if (!is_scalar($value) && null !== $value) {
+                throw new \LogicException(sprintf('Unable to use "%s" (%s) as an attribute. Attributes must be scalar or null. If you meant to mount this value on your component, make sure this is a writable property.', $key, get_debug_type($value)));
             }
         }
 

src/TwigComponent/src/Resources/doc/index.rst

@@ -454,6 +454,19 @@ When rendering the component, you can pass an array of html attributes to add:
       My Component!
     </div>
 
+Set an attribute's value to ``null`` to exclude the value when rendering:
+
+.. code-block:: twig
+
+    {# templates/components/my_component.html.twig #}
+    <input{{ attributes}}/>
+
+    {# render component #}
+    {{ component('my_component', { type: 'text', value: '', autofocus: null }) }}
+
+    {# renders as: #}
+    <input type="text" value="" autofocus/>
+
 Defaults & Merging
 ~~~~~~~~~~~~~~~~~~
 

src/TwigComponent/tests/Fixtures/templates/template_a.html.twig

@@ -1,3 +1,3 @@
 {{ component('component_a', { propA: 'prop a value', propB: 'prop b value' }) }}
-{{ component('with_attributes', { prop: 'prop value 1', class: 'bar', style: 'color:red;' }) }}
+{{ component('with_attributes', { prop: 'prop value 1', class: 'bar', style: 'color:red;', value: '', autofocus: null }) }}
 {{ component('with_attributes', { prop: 'prop value 2', attributes: { class: 'baz' }, type: 'submit', style: 'color:red;' }) }}

src/TwigComponent/tests/Integration/ComponentExtensionTest.php

@@ -60,7 +60,7 @@ public function testCanRenderComponentWithAttributes(): void
         $output = self::getContainer()->get(Environment::class)->render('template_a.html.twig');
 
         $this->assertStringContainsString('Component Content (prop value 1)', $output);
-        $this->assertStringContainsString('<button class="foo bar" type="button" style="color:red;">', $output);
+        $this->assertStringContainsString('<button class="foo bar" type="button" style="color:red;" value="" autofocus>', $output);
         $this->assertStringContainsString('Component Content (prop value 2)', $output);
         $this->assertStringContainsString('<button class="foo baz" type="submit" style="color:red;">', $output);
     }

src/TwigComponent/tests/Unit/ComponentAttributesTest.php

@@ -21,9 +21,14 @@ final class ComponentAttributesTest extends TestCase
 {
     public function testCanConvertToString(): void
     {
-        $attributes = new ComponentAttributes(['class' => 'foo', 'style' => 'color:black;']);
-
-        $this->assertSame(' class="foo" style="color:black;"', (string) $attributes);
+        $attributes = new ComponentAttributes([
+            'class' => 'foo',
+            'style' => 'color:black;',
+            'value' => '',
+            'autofocus' => null,
+        ]);
+
+        $this->assertSame(' class="foo" style="color:black;" value="" autofocus', (string) $attributes);
     }
 
     public function testCanSetDefaults(): void