Multiple Form Tags when invoking turbo_stream response via link

1

Anyone experiencing this,

I have a link
<%= link_to “New Board”, new_board_path, method: :get, data: { turbo: true, local: true }, class: “btn btn-outline-primary” %>

It’s calling the new action on the controller, which then renders and appends a modal to the body of the page using a new.turbo_stream.erb file.

The problem I see is when I click on that link multiple times, it keeps appending form tags.

I can stimulus remove them but I wish that’d those form tags would be removed after the AJAX call is finished automatically.

1 Like
2

Hi @tdak,

In your new.turbo_stream.erb, your turbo-stream should “replace” the element with the id targeted instead of “update” it.

It will replace the “whole element” with what’s inside the template tag of the turbo-stream, something like:

<div id="element_to_replace">
</div>

with

<turbo-stream action="replace" target="element_to_replace">
  <template>
    <div class="my_modal">
    </div>
  </template>
</turbo-stream>

By doing this, your remove the element and his id is not more reachable so the next time your server respond, turbojs won’t find the correct id and so it will not add another modal.

3

Thanks for replying nodalailama,

That’s what I am doing already, but that’s not the issue that happens.

The problem is when using links to send a turbo stream ajax request to the server. I am guessin turbo converts the call from GET to POST by adding a FORM element to the bottom of the page and then invoking the submit on that form. It doesn’t clean up the FORM element. Those form elements just accumulate at the bottom of the page. Like so.

Screen Shot 2021-02-15 at 8.58.04 AM
Screen Shot 2021-02-15 at 8.58.04 AM717×134 21.8 KB

4

Hi @tdak,

It’s difficult to analyze without the whole code.
It seems like you append “form” to the body with the id “master_boardly” …
append so adding at the end.

I can not help you more without looking at your code.

Best regards,
Nod.

5

That’s the thing, I am not appending anything.

<%= link_to “New Board”, new_board_path, method: :get, data: { local: true }, class: “btn btn-outline-primary” %>

That’s the link. Every time I click on it, it appends a FORM element. That’s all it is. I don’t have anything else.

The FORM element is created by Turbo. I am guessing, TURBO does this automatically for links that have data { local: true } set on them. It’s probably a bug right now.

I’ve been looking through the code for Turbo, trying to find where it does this FORM creation. It’s in one of the observers. I understand the concept behind this, just wondering if it should automatically clean up FORM elements it creates after fetch is completed.

6

I send you a private message …

7

No worries. Thank you. It’s definitely a bug. I’ll figure it out.

8

Which version of Rails are you using? local: true flip-flops with remote: false depending on the version.

Walter

9

I am using Rails 6.1.1

10

Did you ever figure out what was causing the forms to append to the page?