bug symfony#59292 [WebProfilerBundle] Fix event delegation on links inside toggles (MatTheCat)

This PR was merged into the 6.4 branch.

Discussion
----------

[WebProfilerBundle] Fix event delegation on links inside toggles

| Q             | A
| ------------- | ---
| Branch?       | 6.4
| Bug fix?      | yes
| New feature?  | no
| Deprecations? | no
| Issues        | N/A
| License       | MIT

In symfony#57525, the security panel’s authenticator tab got updated with dumps in toggles. Issue is, we currently call `stopPropagation` when link are clicked to avoid closing the toggle, but dumps handle links click using event delegation. That means when you click on a `sf-dump-toggle`, the event cannot reach the `sf-dump` because its propagation is stopped.

This PR handles this case by checking if a link is present in the DOM between the toggle and the element which was clicked.

It also leverages the `currentTarget` property to get the clicked toggle.

Commits
-------

241597d [WebProfilerBundle] Fix event delegation on links inside toggles

Author: nicolas-grekas

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig

@@ -122,16 +122,19 @@
                 }
 
                 toggle.addEventListener('click', (e) => {
+                    const toggle = e.currentTarget;
+
+                    if (e.target.closest('a, .sf-toggle') !== toggle) {
+                        return;
+                    }
+
                     e.preventDefault();
 
                     if ('' !== window.getSelection().toString()) {
                         /* Don't do anything on text selection */
                         return;
                     }
 
-                    /* needed because when the toggle contains HTML contents, user can click */
-                    /* on any of those elements instead of their parent '.sf-toggle' element */
-                    const toggle = e.target.closest('.sf-toggle');
                     const element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
 
                     toggle.classList.toggle('sf-toggle-on');
@@ -154,14 +157,6 @@
                     toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
                 });
 
-                /* Prevents from disallowing clicks on links inside toggles */
-                const toggleLinks = toggle.querySelectorAll('a');
-                toggleLinks.forEach((toggleLink) => {
-                    toggleLink.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                    });
-                });
-
                 toggle.setAttribute('data-processed', 'true');
             });
         }

src/Symfony/Component/ErrorHandler/Resources/assets/js/exception.js

@@ -145,19 +145,17 @@
             }
 
             addEventListener(toggles[i], 'click', function(e) {
-                e.preventDefault();
+                var toggle = e.currentTarget;
 
-                if ('' !== window.getSelection().toString()) {
-                    /* Don't do anything on text selection */
+                if (e.target.closest('a, span[data-clipboard-text], .sf-toggle') !== toggle) {
                     return;
                 }
 
-                var toggle = e.target || e.srcElement;
+                e.preventDefault();
 
-                /* needed because when the toggle contains HTML contents, user can click */
-                /* on any of those elements instead of their parent '.sf-toggle' element */
-                while (!hasClass(toggle, 'sf-toggle')) {
-                    toggle = toggle.parentNode;
+                if ('' !== window.getSelection().toString()) {
+                    /* Don't do anything on text selection */
+                    return;
                 }
 
                 var element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
@@ -182,22 +180,6 @@
                 toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
             });
 
-            /* Prevents from disallowing clicks on links inside toggles */
-            var toggleLinks = toggles[i].querySelectorAll('a');
-            for (var j = 0; j < toggleLinks.length; j++) {
-                addEventListener(toggleLinks[j], 'click', function(e) {
-                    e.stopPropagation();
-                });
-            }
-
-            /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
-            var copyToClipboardElements = toggles[i].querySelectorAll('span[data-clipboard-text]');
-            for (var k = 0; k < copyToClipboardElements.length; k++) {
-                addEventListener(copyToClipboardElements[k], 'click', function(e) {
-                    e.stopPropagation();
-                });
-            }
-
             toggles[i].setAttribute('data-processed', 'true');
         }
     })();