ToggleSwitchForm does not work with Turbo Responses

[klaustopher]

Hi there,

in our application we are currently introducing a ToggleSwitchForm and we want the response to change a bit of state in the page. We are using turbo streams. The response we get is a proper turbo-stream response but since the request does not originate from a proper form request but instead a fetch request, turbo does not trigger.

See

view_components/app/components/primer/alpha/toggle_switch.ts

Lines 161 to 172 in ae8dbe2

	try {
	response = await fetch(this.src, {
	credentials: 'same-origin',
	method: 'POST',
	headers: {
	'Requested-With': 'XMLHttpRequest',
	},
	body,
	})
	} catch (error) {
	throw new Error('A network error occurred, please try again.')
	}

In my opinion we have 2 options to tackle this:

1. We allow to pass a parameter into the ToggleSwitchForm that adds a data attribute to tell the component that it is rendered in a turbo context and then change the fetch request to include headers: { Accept: "text/vnd.turbo-stream.html" } and when we have the response we trigger Turbo.renderStreamMessage(response.text()). But I am not sure if you want to tie your implementation to Turbo this closely.
2. Another option would be that instead of building a fetch request, we add hidden form inputs for the CSRF token and the value, fill those and then trigger a form.submit() to have the request be executed as a normal form submission.

I'll be happy to submit a PR for either solution if you let me know which one is the preferred way.

[camertron]

Hey @klaustopher thanks for bringing this up! We have that XMLHttpRequest header in there because a number of the actions in the GitHub monolith check request.xhr?. We haven't considered other headers or request patterns until now 😅

We allow to pass a parameter into the ToggleSwitchForm that adds a data attribute... But I am not sure if you want to tie your implementation to Turbo this closely.

primer/view_components is already very much tied to Rails, so I don't see much of an issue in adding a parameter to ToggleSwitchForm, eg. turbo: true. I do wonder tho if it would make sense to add an accept: param instead to make the header itself customizable.

Another option would be that instead of building a fetch request, we add hidden form inputs for the CSRF token and the value, fill those and then trigger a form.submit() to have the request be executed as a normal form submission.

That's an interesting idea. I actually kind of like this better because it doesn't get all fancy with fetch and instead just relies on the platform. Would you be inclined to submit a PR for this one?

[klaustopher]

I'll do a PR, give me some time :)