search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
38.24k stars 1.3k forks source link

[bug] hx-boost: form with get method keeps appending param in the URL #1788

Open resmo opened 1 year ago

resmo commented 1 year ago

Summary

Given a form with method GET to implement a search with a param named query.

After submit the form, the param is appended to the URL. This is fine, but after each form submit the query param keeps getting appended in the URL resulting in multiple identical params appended.

Version

Version 1.9.5 (not tested in previous versions)

Reproducer

Given a simple form (search form) with method GET:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/htmx.org@1.9.5"
        integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO"
        crossorigin="anonymous"></script>
</head>

<body hx-boost="true">
    <form method="get">
        search <input type="text" name="query">
    </form>
</body>

</html>

Without hx-boost URL is becomes ?query=<query1>

With hx-boost, the query keeps getting appended after every form submit resulting in: ?query=test&query=test ...

Expected

I would have expected the query not to be appended, it should honor the form action resulting in always one query=<query>

resmo commented 1 year ago

related #485 , hx-push-url="false" is a workaround for me, but I still think the appending of a param multiple times is a bug.

alexpetros commented 1 year ago

Yup, I think that's a bug too. We'll get this prioritized.

andycnguyen commented 8 months ago

I've encountered this too. I was wondering why my get-form broke when I added Htmx, and it seems to be because appending to the query string (instead of replacing it) results in multiple, often inconsistent specifications of the same variables in the Url.

brox commented 3 months ago

I had the same problem but changing from hx-get="" to hx-get="/" fixed it for me. Seems like an empty or implicit URL causes this.

feelixe commented 1 month ago

Is there a plan to fix this issue? I would love to help, but I saw the PR that already tried to fix this was closed.

resmo commented 1 month ago

Is there a plan to fix this issue? I would love to help, but I saw the PR that already tried to fix this was closed.

have you tried the non-empty URL e.g. hx-get="/" workaround?

feelixe commented 1 month ago

I'm using hx-boost on the body element so it applies to everything. Thanks for the tip, but I tried with hx-get="/" and then it does not update the url in the browser, and it's not pushing to history so you can step backwards, which makes it kinda unusable for me.

taronull commented 1 month ago

Not sure this helps but having action="/" prevents the issue

mbarzeev commented 1 month ago

Hi, Had this issue as well - a link tag with a href that has query params to is and hx-boost="true" keeps on appending the query params to the URL, and yes, you want the push URL cause you want the native history and all that. Seems like a critical bug for hx-boost.