Symfony form rendered in twig template as controller is not submitting

Question

I'd like to have simple "Search" input field in base.html.twig. Normally I would need to write code to maintain form in every route. To solve this problem I decided to create separate controller with route to render it directly in base.html.twig template:

<div class="top-middle col-12 col-md-6 d-flex order-2 order-md-1">
{{ render(controller("App\\Controller\\SearchController::searchProduct"))}}
</div>

It works find except nothing happens when the form is submitted. I tried it in normal way in one of my routes and it was working fine. So don't know where the problem is.

My SearchController with route which is rendered in twig :

class SearchController extends AbstractController
{
    #[Route('search-product', name: 'search_product')]
    public function searchProduct(Request $request)
    {
        $searchForm = $this->createForm(SearchProductType::class);
        $searchForm->handleRequest($request);
      
        if ($searchForm->isSubmitted() && $searchForm->isValid()) {
            
            dump('Form submitted');
        }
        return $this->render('components/search-input.html.twig', [
            'searchForm' => $searchForm->createView()
            ]);
    }
}

Search input.html.twig component:

<div class="top-search">
            <i class="bi-search top-search__icon"></i>
            {{ form(searchForm) }}
</div>

and the main controller which renders index.html.twig with base.html.twig:

 #[Route('/', name: 'home')]
    public function index(FileHandler $fileHandler, SessionInterface $session, Request $request): Response
    {
      
        $products = $this->doctrine->getRepository(Product::class)->getProducts('Dresses', 4);
        $products = $this->addPathToImages($products, 'Dresses');
        
        return $this->render('shop/index.html.twig', [
            'products' => $products
        ]);
    }

The line

dump('Form submitted');

is not executed when the form is submitted. Page refreshes but nothing happens. I think the whole logic should stay in this route/controller or I am missing something?

Answer 1

As requested I publish my solution:

Instead of embedding controller directly in Twig file and decided to handle my little form (just Search input, submitted by pressing "enter") with js. The reason for this is that it's impossible to redirect from embedded controller. Code in twig:

<form id="top-search-form">
                <div class="top-search">
                        <input id="search-string"
                        class="top-search__input" type="search" 
                        placeholder="Search shop">
                </div>
</form>             

and code written in Javascript (requires FOSJSRouting Bundle):

const routes = require('/public/js/fos_js_routes.json');
import Routing from '/vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';

Routing.setRoutingData(routes);

document.addEventListener('DOMContentLoaded', function() {
    const searchForm = document.getElementById('top-search-form');
    
    searchForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const searchString = document.getElementById('search-string').value;

        var url = Routing.generate('items_filter', {
            'searchText': searchString
        });
       
        location.href = url;
    });
})