Convert search parameters to form inputs when using data-turbo-stream#641
Convert search parameters to form inputs when using data-turbo-stream#641LVMBDV wants to merge 1 commit intohotwired:mainfrom LVMBDV:stream-link-form-population
data-turbo-stream#641Conversation
Links with `data-turbo-stream` are converted to forms, and forms with method="GET" don't submit the query string part of their action. This can be circumvented by iterating through any query string parameters and adding them to the generated form as hidden inputs. Note: MDN refers to what we usually call "query string parameters" as "search parameters". This is a bit confusing, but it's the correct terminology I guess :)
| form.setAttribute("action", action) | ||
| form.setAttribute("hidden", "") | ||
|
|
||
| const searchParameters = new URLSearchParams(new URL(action, window.location.toString()).search) |
There was a problem hiding this comment.
The way the parameters are encoded depend on the from's [method] (as discovered in #461 and changed to be in compliance with the HTML Specification).
In short, GET submissions ignore the [action] query parameters and override them with the name-value pairs of its <input> elements, while POST submissions merge the two sets of name-value pairings.
If this method were to generate <input> elements, it should do it in a way that works consistently for both verbs. That might mean iterating through the action URL's search params, then deleting them afterward:
linkClickIntercepted(link: Element, location: string):
const action = new URL(action, document.baseURI)
const form = document.createElement("form")
form.setAttribute("data-turbo", "true")
form.setAttribute("hidden", "")
for (const [name, value] of action.searchParams) {
const input = document.create("input")
input.type = "hidden"
input.name = name
input.value = value
form.append(input)
}
action.search = ""
form.setAttribute("action", action.toString())
// ...
}|
I've been looking at a different approach to this problem as well. Originally it seemed like submitting I've got a branch going where I'm trying a different tack -- rather than submit these stream links as I think it would be worth looking at that approach before we settle on the right fix. I'll try to get a PR open as soon as I can (but it will probably be a few days, sorry; busy week at work!) @seanpdoyle does that sound reasonable to you? |
|
@kevinmcconnell I'm in favor of that change.
I could draft something up today, if that's OK with you. @LVMBDV could you create a test or two exercising the implementation change in this pull request? If you're able to add them here, I'll make sure to get them passing on the alternative PR. |
Absolutely, that would be great 👍 FWIW, the approach I was looking at is to add an Of course you may have an entirely different approach in mind; just wanted to mention where I'd reached, in case it saves you any time. |
|
Hi, I needed this for a specific use case I stopped pursuing to allocate more time to releasing an MVP. If the other approaches don't work out, I can refine this PR i.e. add tests and documentation but let's shelve this one until that's decided. |
|
Solved via #647 instead. |
Fixes a problem pointed out recently on #612 by @seanabrahams and @kevinmcconnell.
Links with
data-turbo-streamare converted to forms, and forms with method="GET" don't submit the query string part of their action. This can be circumvented by iterating through any query string parameters and adding them to the generated form as hidden inputs.Note: MDN refers to what we usually call "query string parameters" as "search parameters". This is a bit confusing, but it's the correct terminology I guess :)