[Live] Fix 'onUpdated' hook call

Author: kempha

src/LiveComponent/src/LiveComponentHydrator.php

@@ -143,6 +143,8 @@ public function hydrate(object $component, array $props, array $updatedProps, Li
         $attributes = new ComponentAttributes($dehydratedOriginalProps->getPropValue(self::ATTRIBUTES_KEY, []));
         $dehydratedOriginalProps->removePropValue(self::ATTRIBUTES_KEY);
 
+        $needProcessOnUpdatedHooks = [];
+
         foreach ($componentMetadata->getAllLivePropsMetadata($component) as $propMetadata) {
             $frontendName = $propMetadata->calculateFieldName($component, $propMetadata->getName());
 
@@ -215,10 +217,15 @@ public function hydrate(object $component, array $props, array $updatedProps, Li
             }
 
             if ($propMetadata->onUpdated()) {
-                $this->processOnUpdatedHook($component, $frontendName, $propMetadata, $dehydratedUpdatedProps, $dehydratedOriginalProps);
+                $needProcessOnUpdatedHooks[$frontendName] = $propMetadata;
             }
         }
 
+        // Run 'onUpdated' hooks after all props have been initialized.
+        foreach ($needProcessOnUpdatedHooks as $frontendName => $propMetadata) {
+            $this->processOnUpdatedHook($component, $frontendName, $propMetadata, $dehydratedUpdatedProps, $dehydratedOriginalProps);
+        }
+
         foreach (AsLiveComponent::postHydrateMethods($component) as $method) {
             $component->{$method->name}();
         }

src/LiveComponent/tests/Fixtures/Component/WithOnUpdated.php

@@ -0,0 +1,52 @@
+<?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;
+use Symfony\UX\TwigComponent\Attribute\PostMount;
+
+#[AsLiveComponent('with_on_updated')]
+final class WithOnUpdated
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(writable: true, onUpdated: 'onNumber1Updated')]
+    public int $number1;
+
+    #[LiveProp]
+    public int $number2;
+
+    #[LiveProp]
+    public int $number3;
+
+    #[LiveProp]
+    public int $total;
+
+    #[PostMount]
+    public function postMount(): void
+    {
+        $this->calculateTotal();
+    }
+
+    public function onNumber1Updated(): void
+    {
+        $this->calculateTotal();
+    }
+
+    private function calculateTotal(): void
+    {
+        // All live props must be available to read
+        $this->total = $this->number1 + $this->number2 + $this->number3;
+    }
+}

src/LiveComponent/tests/Fixtures/templates/components/with_on_updated.html.twig

@@ -0,0 +1,13 @@
+<div{{ attributes }}>
+    <label>
+        <input type="number" data-model="number1" step="1">
+    </label>
+
+    <ul>
+        <li>Number1: {{ number1 }}</li>
+        <li>Number2: {{ number2 }}</li>
+        <li>Number3: {{ number3 }}</li>
+    </ul>
+
+    <div>Total: {{ total }}</div>
+</div>

src/LiveComponent/tests/Functional/Test/InteractsWithLiveComponentsTest.php

@@ -179,4 +179,19 @@ public function testCanSubmitForm(): void
         $this->assertSame(200, $response->getStatusCode());
         $this->assertStringContainsString('foobar', $testComponent->render());
     }
+
+    public function testAccessAllLivePropsInsideOnUpdatedHook(): void
+    {
+        $testComponent = $this->createLiveComponent('with_on_updated', [
+            'number1' => 1,
+            'number2' => 2,
+            'number3' => 3,
+        ]);
+
+        $this->assertStringContainsString('Total: 6', $testComponent->render());
+
+        $testComponent->set('number1', 4);
+
+        $this->assertStringContainsString('Total: 9', $testComponent->render());
+    }
 }