Turbo.visit doesnt find turbo frame

1

We have a turbo frame declared in our main application layout file like this:

  <%= turbo_frame_tag "slide_over"%>

We have links on the page which work correctly and render content inside that turbo frame (it’s actually a modal view), and don’t change the URL in the history/browser navigation bar:

 <%= link_to "Title", item_url(@item), data: {turbo_frame: "slide_over"} %>

Elsewhere in our code, we also want to manually show this slide over from javascript/stimulus controller when a user clicks an item, so are initialising a Turbo visit like so:

Turbo.visit("/items/1", {frame: "slide_over"};

However this does seems to perform a full page visit, navigating to /items/1 instead. When debugging Turbo, the culprit appears to be in the Session visit function:

visit(location, options = {}) {
        const frameElement = options.frame ? document.getElementById(options.frame) : null;
        if (frameElement instanceof FrameElement) { <- this evaluates to false!
            frameElement.src = location.toString();
            frameElement.loaded;
        }
        else {
            this.navigator.proposeVisit(expandURL(location), options);
        }
    }

the line if (frameElement instanceof FrameElement) { is evaluating to false, and therefore the frame’s src is not being set.

Does anyone know what we might be doing wrong?

2

For anyone else that stumbles across this, it looks like there was an issue with Turbo loading incorrectly - it seems that there was an issue with a 3rd party library we use (what3words) which seems to define CustomElementRegistry twice. I think this prevented Turbo instantiating correctly (although parts of it worked). We upgraded Turbo to 7.3.0 and the issue has gone.