combo_nav_js input can be triggered multiple times

[Maxhou00]

Hello,

I'm trying to use pagy_combo_nav_js with turbo and I realised that when I change the number in the input it trigger the change once (which is good) but if I click out after changing the number, it will trigger once more leading to a weird behavior with Turbo. Same if I change the number then press the key enter

If I change the number input by using the arrows key then click out of the input = 1 request

If I change the number number by pressing 1 on my keyboard and then click out of the input = 2 request

I can't really explain why but becahse of that the first request is a fetch so it will replace my turbo_frame_tag correctly but the second call will redirect me to my comments#index.html.haml leading to a broken page.

I haven't found many example of using turbo with pagy that is not an "infinite load" pagination.

Here is pieces of my code :

# article/show.html.haml
  %section#comment
    .show_comment
      %h3.comment_section-title 댓글
      .card_container
        .comment_main-list#comment_article-list
          = turbo_frame_tag :comments, src: article_comments_path(@article.id)

# article/comments_controller.rb
class Article::CommentsController < ApplicationController
  def index
    @pagy, @comments = pagy(
      @comments,
      items: 20,
      page: request.query_parameters[:page] || @article.last_comment_page
    )
  end
end

# article/comments/index.html.haml
= turbo_frame_tag :comments do
  = render 'comments/comment_field', id_field: 0
  #comment_nopage
    = render 'comments/comment', my_collect: comments
  - if article.comments_count > 2
    = render 'comments/comment_field', id_field: 1
    #comments_pagination{ data: { controller: 'pagy--initializer' } }
      != pagy_combo_nav_js(@pagy)

# pagy/initializer_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  connect() {
    Pagy.init(this.element);
  }
}

[ddnexus]

PLease, let me know if this helps: https://ddnexus.github.io/pagy/docs/how-to/#paginate-multiple-independent-collections

However, for the multiple triggers... the particular combo_js, adds a focusout and a keypress event listeners pointing to the same action function that basically sets the href of a hidden anchor tag to the page url and click() it.

Could you try to check whether the multiple triggering happens also without turbo?

[Maxhou00]

Thank you for the answer.

This the implementation I followed and it's working well except for the multiple triggers.

On the old version of my website that I'm trying to migrate, it's not using turbo and the multiple triggering happens too. You can try it here (migrated to turbo now). However it's using an old version of pagy 5.0, rails 7.0, and turbolinks.
If you change the number and press the key ENTER you should have something similar.

[ddnexus]

Then... I think it's probably a bug, and I suspect that it's likely the same event listener set multiple times, also firing multiple times... and it's probably still there in the latest version.

@benkoshy may confirm that.