Turbo: Toggable selector not executing the event_listener function set by _setUpToggle on a new visit

[pedroordep]

Hi,
Recently I have been trying to incorporate Turbo on a project that uses this gem and found a conflict regarding turbo and the toggle functionality.

Context

If we do not use the toggle property, everything runs perfectly, even with nested render_asyncs, either when the page is loaded for the first time or by navigating to that page.

When using the toggle property (without the start flag or with the start flag set to false), render_async is not executed when navigating to that page.

Example code

1. main page e.g.: app/views/general_pages/index.html.erb

<%= render_async example_path, toggle: { selector: '#example-button', start: false, event: :click } do %>
  <button id='example-button'>Load example</button>
<% end %>

2. controller e.g.: app/controllers/general_pages_controller.rb

def example
  @text = "Loaded example"

  render partial: "example"
end

3. partial e.g.: app/views/general_pages/_example.html.erb

<%= @text %>

4. routes e.g.: app/config/routes.rb

get "test", to: "general_pages#index"
get "example", to: "general_pages#example"

5. render_async initializer

RenderAsync.configure do |config|
  config.turbo = true
  config.jquery = true
end

On this example, if the initial page is /test everything runs as expected: We see the button and clicking on it renders the "Loaded example" text.

If our initial page is not /test, when we navigate to it we see the button but nothing happens when clicking on it.

Possible solution

After some digging I found that the _setUpToggle function on _request_jquery.js.erb is executed but the event listener function added to the $(document) object is not executed.

That event listener function that I am referring is this one:
$(document).<%= toggle[:once] ? 'one' : 'on' %>('<%= toggle[:event] || 'click' %>', '<%= toggle[:selector] %>', function(event) {

I managed to make it work by changing the logic to the following:

    function _setUpToggle() {
       if (<%= toggle[:selector].present? %>) {
          $('<%= toggle[:selector] %>').<%= toggle[:once] ? 'one' : 'on' %>('<%= toggle[:event] || 'click' %>', function(event) {
            // unaltered function code
          });
        } else {
          $(document).<%= toggle[:once] ? 'one' : 'on' %>('<%= toggle[:event] || 'click' %>', '', function(event) {
            // unaltered function code
          });
        }
    }

For some reason, by adding the event listener directly on the element instead of the document fixed this issue and the function is triggered on the button click, even when navigating to it.

I just wanted to discuss this problem/solution and I'm more than happy to open a Pull Request if this solution makes sense. Thanks!

[pedroordep]

This issue was related to other code in the project.

It had $(document).off('click') somewhere and it was removing all listeners from the document.