search

josefarias / hotwire_combobox

An accessible autocomplete for Ruby on Rails.
https://hotwirecombobox.com
MIT License
436 stars 26 forks source link

Searching async combobox jumps to top when loading more results #159

Closed ILiuz closed 3 months ago

ILiuz commented 3 months ago

Bug description

Searching in an async combobox and then scrolling to the pagination threshold, will result in a jump to the top of the list, and not keep your current position.

To Reproduce

Steps to reproduce the behavior:

  1. Open an async combobox and search for something that will give paginated results
  2. Scroll down the list until you get to the pagination threshold
  3. Notice that you will jump to top as you cross the pagination threshold

Expected behavior

On step 3, you should keep your position in the list

Version Numbers

HotwireCombobox info

Desktop info

Additional context

I do not believe this is related to the wrap-around scrolling, but an issue with how new lazy-loaded elements are added to the list.

The file _pagination.html is responsible for producing the element that will trigger the lazy loading:

<%# locals: (for_id:, src:) -%>

<%= tag.li id: hw_pagination_frame_wrapper_id(for_id), class: "hw_combobox__pagination__wrapper",
      data: { hw_combobox_target: "endOfOptionsStream", input_type: params[:input_type] },
      aria: { hidden: true } do %>
  <%= turbo_frame_tag hw_pagination_frame_id(for_id), src: src, loading: :lazy %>
<% end %>

When you search the combobox, _inputtype will be set to insertText to make sure you jump to the top, for the most relevant item. Since this element is inserted with the same data-attribute every time you hit the pagination threshold in the list (unless you have done some other action, like backspace delete text), it will keep jumping you back to the top as you scroll down the list of options and lazy load more results.

I believe _inputtype should only be set to insertText on the first request after the user has entered text, and not for subsequent lazy-loaded requests, but I am not sure how to do that, or what the ramifications would be, so I filed a bug report instead of a pull request.

josefarias commented 3 months ago

Thanks @ILiuz. v0.2.5 was just released yesterday. Just to help narrow things down, did you experience this before that release? (Assuming you've been using the combobox for a while, maybe you haven't)

josefarias commented 3 months ago

Running a git bisect, seems like this was introduced here: https://github.com/josefarias/hotwire_combobox/commit/0660671f4669c3fb38eada3da34872bf04bee3a8

Taking a look now.

ILiuz commented 3 months ago

It seems like you already found the relevant commit, which fits with my experience. I experienced the issue with v0.2.3 and upgraded to v0.2.5 just to make sure it wasn’t already resolved. Thank you for taking a look!

josefarias commented 3 months ago

@ILiuz just pushed v0.3.0. Should be fixed in that version. Thanks!