Turbo is loaded properly but doesn't work

Symfony version(s) affected

7.0.2

Description

I'm trying to make Turbno working in a new web project created by symfony CLI. UX Turbo is automatically installed and connected.

But when I submit the following form:

                                <turbo-frame id="the_frame_id">
                                {{ form(form) }}
                                </turbo-frame>

Nothing specific happens, the form is submitted regularly, not by ajax, and the the browser renders a new page with the response from the submission url response.

The documentation says that I only need to install the bundles and it is done and should work. But it doesn't. Documentation also says that Turbo will post some headers with the form submit, but in my case, I can't see any turbo-specific headers in the submit request. It looks like nothing works at all.

The Turbo documentation says:

To wrap an independent segment in its own navigation context, enclose it in a tag. For example:

<turbo-frame id="new_message">
  <form action="/messages" method="post">
    ...
  </form>
</turbo-frame>

When you submit the form above, Turbo extracts the matching element from the redirected HTML response and swaps its content into the existing new_message frame element. The rest of the page stays just as it was.

But it doesn't work. I've enclosed my form a turbo frame but it doesn't work.

The Turbo JS bundle is loaded on the page. I can see the following in the browser console:

application #starting   stimulus.index-b5b1d00e42695b8959b4a1e94e3bc92a.js:7 
application #start      stimulus.index-b5b1d00e42695b8959b4a1e94e3bc92a.js:7

No errors in the browser log.

controllers.json:

{
    "controllers": {
        "@symfony/ux-turbo": {
            "turbo-core": {
                "enabled": true,
                "fetch": "eager"
            },
            "mercure-turbo-stream": {
                "enabled": false,
                "fetch": "eager"
            }
        }
    },
    "entrypoints": []
}

But nothing works. How to fix it?

How to reproduce

Create a project.
Add a page
Add a form enclosed in <turbo-frame>
Submit form

Expected - the content inside the turbo frame is changed.

Actual - regular submission happens, not ajax, the whole page is reloaded.

Update: Moreover, Turbo is worsening standard behavior. When I click on a link with the hash URL part only (i.e. <a href="#id">) the browser reloads the whole page instead of just scrolling to the corresponding anchor. This is weird. I've spent a few hours to make the thing work but got even worse results. I had to turn off Turbo completely to at least fix the normal behavior.

symfony / ux