Commits on Feb 20, 2024

1. Handle a/buttons with data-to & data-method (Static) …

   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 committed Feb 20, 2024
   Configuration menu

   • View commit details
   • Copy full SHA for c356f36
   • Browse repository at this point

   Copy the full SHA

   c356f36 View commit details

   Browse the repository at this point in the history