Skip to content

on Chrome, htmx-swap via <button> scrolls to bottom of page if any <select> is present #3340

Open
@petertseng

Description

@petertseng

The details in the issue title seem strangely specific, but I currently can't reproduce this issue unless all of these conditions are present.

Here's my html file:

<html>
  <head>
  </head>
  <body>
    <form>
      <select>
        <option value="dummy">dummy</option>
      </select>
    </form>

    <div id="foo" hx-target="#foo">
      <p><button hx-get="/scrolltestsub.html">1</button></p>
      <p><button hx-get="/scrolltestsub.html">2</button></p>
      <p><button hx-get="/scrolltestsub.html">3</button></p>
      <p><button hx-get="/scrolltestsub.html">4</button></p>
      <p><button hx-get="/scrolltestsub.html">5</button></p>

      <!-- adjust this to be tall enough to cause the page to exceed one screen height if necessary -->
      <div style="height: 1600px">
      </div>
    </div>

    <script src="https://unpkg.com/[email protected]"></script>
  </body>
</html>

the scrolltestsub.html simply contains the same content as in foo. reproduced below for convenience:

      <p><button hx-get="/scrolltestsub.html">1</button></p>
      <p><button hx-get="/scrolltestsub.html">2</button></p>
      <p><button hx-get="/scrolltestsub.html">3</button></p>
      <p><button hx-get="/scrolltestsub.html">4</button></p>
      <p><button hx-get="/scrolltestsub.html">5</button></p>

<!-- adjust this to be tall enough to cause the page to exceed one screen height if necessary -->
      <div style="height: 1600px">
      </div>

If the browser is scrolled to the top of the page, clicking a button keeps the page in the same location, as I would have expected, since the resulting content is the same.

If you scroll down a little bit (say, scroll down so that the 1 button isn't visible but the 2 button is), then click one of the buttons, the page then scrolls down all the way to the bottom of the page, which is unexpected and inconvenient in a setting where I want to allow the buttons to be clicked one after the other without having to scroll back up in between clicks.

This happens in Chrome 137.0.7151.103, but not in Firefox.
It doesn't happen if you delete the select.
It also doesn't happen if you change the button to an a.

I'm having a tough time figuring out whether the cause is something in HTMX or something in Chrome. Do you have any insight as to what might be going on here?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions