Add demo for issue symfony/ux#2438

src/Form/Type/TestType.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+final class TestType extends AbstractType
+{
+
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add(
+                'barcode',
+                TextType::class,
+            )
+        ;
+    }
+}

src/Twig/Components/TestComponent.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Form\Type\TestType;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Form\FormInterface;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\ComponentToolsTrait;
+use Symfony\UX\LiveComponent\ComponentWithFormTrait;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent(template: 'components/test.html.twig')]
+class TestComponent extends AbstractController
+{
+    use DefaultActionTrait;
+    use ComponentToolsTrait;
+    use ComponentWithFormTrait;
+
+    #[LiveAction]
+    public function submit(): void
+    {
+        $this->submitForm();
+        $this->resetForm();
+    }
+
+    protected function instantiateForm(): FormInterface
+    {
+        return $this->createForm(TestType::class);
+    }
+
+    private function getDataModelValue(): ?string
+    {
+        return 'norender|*';
+    }
+}

templates/components/test.html.twig

@@ -0,0 +1,21 @@
+<div {{ attributes }}>
+
+   This input field does not get a reset after submitted by hitting the enter key.
+
+    {{ form_start(form, {
+        attr: {
+            'data-action': 'live#action:prevent',
+            'data-live-action-param': 'submit',
+        }
+    }) }}
+    {{ form_row(form.barcode) }}
+    <button
+            type="submit"
+    >Submit
+    </button>
+    {{ form_end(form) }}
+
+    <div data-loading>
+        loading
+    </div>
+</div>

templates/default/homepage.html.twig

@@ -1,47 +1,7 @@
 {% extends 'base.html.twig' %}
 
-{% block body_id 'homepage' %}
-
-{#
-    the homepage is a special page which displays neither a header nor a footer.
-    this is done with the 'trick' of defining empty Twig blocks without any content
-#}
-{% block header %}{% endblock %}
-{% block footer %}{% endblock %}
 
 {% block body %}
-    <div class="page-header">
-        <h1>{{ 'title.homepage'|trans|raw }}</h1>
-
-        {% from 'default/_language_selector.html.twig' import render_language_selector %}
-        {{ render_language_selector(true) }}
-    </div>
-
-    <div class="row">
-        <div class="col-sm">
-            <div class="jumbotron">
-                <p>
-                    {{ 'help.browse_app'|trans|raw }}
-                </p>
-                <p>
-                    <a class="btn btn-primary btn-lg" href="{{ path('blog_index') }}">
-                        <twig:ux:icon name="tabler:users-group" font-size="21px" /> {{ 'action.browse_app'|trans }}
-                    </a>
-                </p>
-            </div>
-        </div>
+   {{ component('TestComponent') }}
 
-        <div class="col-sm">
-            <div class="jumbotron">
-                <p>
-                    {{ 'help.browse_admin'|trans|raw }}
-                </p>
-                <p>
-                    <a class="btn btn-primary btn-lg" href="{{ path('admin_index') }}">
-                        <twig:ux:icon name="tabler:lock"/> {{ 'action.browse_admin'|trans }}
-                    </a>
-                </p>
-            </div>
-        </div>
-    </div>
 {% endblock %}