bigskysoftware
[bug] hx-boost: form with get method keeps appending param in the URL
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/[email protected]"
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>
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.
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.
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.
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.
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?
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.
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.
I'm still experiencing this behaviour when using hx-get="" on 2.0.4, which supposedly included the fix.
@provinzkraut I believe that when you use hx-get="" you're telling HTMX to take the current URL (which will possibly contain existing URL params if the form was already submitted once) and append the form's current params to the URL, which is why this is happening. If you specify the endpoint in your HTML instead of an empty string, it should behave like you want.
you're telling HTMX [...] and append the form's current params to the URL While this is what's happening, I'm not sure that's what I'm telling HTMX. At least it's not what I'm intending to tell it to do.
If you specify the endpoint in your HTML instead of an empty string, it should behave like you want.
True, but the thing is, that requires way more work on my end and, at least to me, a bit unexpected.
Do you think there is a way to support mutating query parameters instead of always appending? This sounds like a very useful feature to me.
I believe you can do <form hx-boost=true hx-target="foo"> with implied (or specified) method=get and action="".
Another alternative is to not use hx-push-url and just use <form hx-get="">.