Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle a/buttons with data-to & data-method (Static) #34

Merged
merged 1 commit into from
Feb 20, 2024

Conversation

germsvel
Copy link
Owner

What changed?

Phoenix allows form submissions through data attributes: data-to, data-method and data-csrf.

That comes from the Phoenix.HTML library's little JS snippet:

function handleClick(element, targetModifierKey) {
  var to = element.getAttribute("data-to"),
      method = buildHiddenInput("_method", element.getAttribute("data-method")),
      csrf = buildHiddenInput("_csrf_token", element.getAttribute("data-csrf")),
      form = document.createElement("form"),
      submit = document.createElement("input"),
      target = element.getAttribute("target");

  form.method = (element.getAttribute("data-method") === "get") ? "get" : "post";
  form.action = to;
  form.style.display = "none";

  if (target) form.target = target;
  else if (targetModifierKey) form.target = "_blank";

  form.appendChild(csrf);
  form.appendChild(method);
  document.body.appendChild(form);

  // Insert a button and click it instead of using `form.submit`
  // because the `submit` function does not emit a `submit` event.
  submit.type = "submit";
  form.appendChild(submit);
  submit.click();
}

The core logic that matters to us is as follows:

  • It uses the data-to as the action.
  • It builds two hidden inputs for "_method" and "_csrf_token".

In order for us to handle that, we reproduce some of the same logic. We pull the to, method, and csrf_token values from the element.

Thus, our Static logic is now able to handle these types of form submissions. There's an open question whether or not we should support those in LiveView. It seems like an odd use case. Most people would use a regular form submission (if they don't want to use LiveView) or a LiveView form. So, for now, we don't introduce the same logic in Live.

NOTE

Unlike other code, supporting this means users can have tests that pass when production is broken!!! (for example, if they forget to put the Phoenix.HTML.js in the app).

That's not ideal, but it seems like a worthwhile trade-off while Phoenix supports those forms as first-class behavior. Otherwise, we cannot test those types of form submissions -- which are still standard enough that Phoenix generators come with them out of the box.

What changed?
=============

Phoenix allows form submissions through data attributes: `data-to`,
`data-method` and `data-csrf`.

That comes from the `Phoenix.HTML` library's little [JS snippet]:

```js
function handleClick(element, targetModifierKey) {
  var to = element.getAttribute("data-to"),
      method = buildHiddenInput("_method", element.getAttribute("data-method")),
      csrf = buildHiddenInput("_csrf_token", element.getAttribute("data-csrf")),
      form = document.createElement("form"),
      submit = document.createElement("input"),
      target = element.getAttribute("target");

  form.method = (element.getAttribute("data-method") === "get") ? "get" : "post";
  form.action = to;
  form.style.display = "none";

  if (target) form.target = target;
  else if (targetModifierKey) form.target = "_blank";

  form.appendChild(csrf);
  form.appendChild(method);
  document.body.appendChild(form);

  // Insert a button and click it instead of using `form.submit`
  // because the `submit` function does not emit a `submit` event.
  submit.type = "submit";
  form.appendChild(submit);
  submit.click();
}
```

[JS snippet]: https://hexdocs.pm/phoenix_html/Phoenix.HTML.html#module-javascript-library

The core logic that matters to us is as follows:

- It uses the `data-to` as the action.
- It builds two hidden inputs for "_method" and "_csrf_token".

In order for us to handle that, we reproduce some of the same logic. We
pull the `to`, `method`, and `csrf_token` values from the element.

Thus, our `Static` logic is now able to handle these types of form
submissions. There's an open question whether or not we should support
those in LiveView. It seems like an odd use case. Most people would use
a regular form submission (if they don't want to use LiveView) or a
LiveView form. So, for now, we don't introduce the same logic in `Live`.

NOTE
----

Unlike other code, supporting this means users can have tests that pass
when production is broken!!! (for example, if they forget to put the
Phoenix.HTML.js in the app).

That's not ideal, but it seems like a worthwhile trade-off while Phoenix
supports those forms as first-class behavior. Otherwise, we cannot test
those types of form submissions -- which are still standard enough that
Phoenix generators come with them out of the box.
@germsvel germsvel merged commit d699792 into main Feb 20, 2024
1 check passed
@germsvel germsvel deleted the gv-handle-data-to-forms branch February 20, 2024 11:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant