From a1504f457cb7ed8d33bb7453c088233177097a95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20K=C3=B6hlbrugge?= <subscriptions@marckohlbrugge.com>
Date: Wed, 24 May 2023 16:18:31 +0100
Subject: [PATCH] Support nested elements inside <button>

This change is necessary to address a potential issue that could arise when a button or an input of type submit contains child elements, such as spans, icons, or other HTML elements.

Currently, ActiveStorage's `didClick` event listener checks the target of the click event to determine if a submit button was clicked. The target property of the event refers to the specific HTML element that was clicked.

In cases where a submit button contains child elements, and one of these child elements is the element that actually gets clicked, the target would refer to this child element, not the button itself.

Since the `didClick` function checks if the target is a button or an input of type submit, this check would fail, and the button wouldn't be stored in `submitButtonsByForm`.

As a result, if the form is then submitted after a direct upload, the first submit button in the form could be incorrectly used to submit the form, even if a different button was originally clicked. This could cause unexpected behavior, as different submit buttons might be intended to trigger different actions on form submission.

By using the `event.currentTarget` instead, we'll get back the button or an input of type submit. This way we ensure that the correct button is stored in `submitButtonsByForm`, even if the click event was triggered by a child element of the button. This addresses the issue and ensures that the correct button is used to submit the form after a direct upload.

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
---
 activestorage/app/assets/javascripts/activestorage.esm.js | 6 +++---
 activestorage/app/assets/javascripts/activestorage.js     | 6 +++---
 activestorage/app/javascript/activestorage/ujs.js         | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/activestorage/app/assets/javascripts/activestorage.esm.js b/activestorage/app/assets/javascripts/activestorage.esm.js
index 0bdc87f7b4199..a8b46801f2d13 100644
--- a/activestorage/app/assets/javascripts/activestorage.esm.js
+++ b/activestorage/app/assets/javascripts/activestorage.esm.js
@@ -771,9 +771,9 @@ function start() {
 }
 
 function didClick(event) {
-  const {target: target} = event;
-  if ((target.tagName == "INPUT" || target.tagName == "BUTTON") && target.type == "submit" && target.form) {
-    submitButtonsByForm.set(target.form, target);
+  const submitButton = event.target.closest(":is(button, input)[type='submit']");
+  if (submitButton && submitButton.form) {
+    submitButtonsByForm.set(submitButton.form, submitButton);
   }
 }
 
diff --git a/activestorage/app/assets/javascripts/activestorage.js b/activestorage/app/assets/javascripts/activestorage.js
index 24a3fc84307fa..1ca800e44c72c 100644
--- a/activestorage/app/assets/javascripts/activestorage.js
+++ b/activestorage/app/assets/javascripts/activestorage.js
@@ -754,9 +754,9 @@
     }
   }
   function didClick(event) {
-    const {target: target} = event;
-    if ((target.tagName == "INPUT" || target.tagName == "BUTTON") && target.type == "submit" && target.form) {
-      submitButtonsByForm.set(target.form, target);
+    const submitButton = event.target.closest(":is(button, input)[type='submit']");
+    if (submitButton && submitButton.form) {
+      submitButtonsByForm.set(submitButton.form, submitButton);
     }
   }
   function didSubmitForm(event) {
diff --git a/activestorage/app/javascript/activestorage/ujs.js b/activestorage/app/javascript/activestorage/ujs.js
index 1fe60374a88c7..e8d5861a2a00f 100644
--- a/activestorage/app/javascript/activestorage/ujs.js
+++ b/activestorage/app/javascript/activestorage/ujs.js
@@ -15,9 +15,9 @@ export function start() {
 }
 
 function didClick(event) {
-  const { target } = event
-  if ((target.tagName == "INPUT" || target.tagName == "BUTTON") && target.type == "submit" && target.form) {
-    submitButtonsByForm.set(target.form, target)
+  const submitButton = event.target.closest(":is(button, input)[type='submit']")
+  if (submitButton && submitButton.form) {
+    submitButtonsByForm.set(submitButton.form, submitButton)
   }
 }