Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 269ba59

Browse filesBrowse files
bug #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 #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
2 parents dc7b96c + 241597d commit 269ba59
Copy full SHA for 269ba59

File tree

Expand file treeCollapse file tree

2 files changed

+12
-35
lines changed
Filter options
Expand file treeCollapse file tree

2 files changed

+12
-35
lines changed

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
+6-11Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -122,16 +122,19 @@
122122
}
123123
124124
toggle.addEventListener('click', (e) => {
125+
const toggle = e.currentTarget;
126+
127+
if (e.target.closest('a, .sf-toggle') !== toggle) {
128+
return;
129+
}
130+
125131
e.preventDefault();
126132
127133
if ('' !== window.getSelection().toString()) {
128134
/* Don't do anything on text selection */
129135
return;
130136
}
131137
132-
/* needed because when the toggle contains HTML contents, user can click */
133-
/* on any of those elements instead of their parent '.sf-toggle' element */
134-
const toggle = e.target.closest('.sf-toggle');
135138
const element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
136139
137140
toggle.classList.toggle('sf-toggle-on');
@@ -154,14 +157,6 @@
154157
toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
155158
});
156159
157-
/* Prevents from disallowing clicks on links inside toggles */
158-
const toggleLinks = toggle.querySelectorAll('a');
159-
toggleLinks.forEach((toggleLink) => {
160-
toggleLink.addEventListener('click', (e) => {
161-
e.stopPropagation();
162-
});
163-
});
164-
165160
toggle.setAttribute('data-processed', 'true');
166161
});
167162
}

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

Copy file name to clipboardExpand all lines: src/Symfony/Component/ErrorHandler/Resources/assets/js/exception.js
+6-24Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -145,19 +145,17 @@
145145
}
146146

147147
addEventListener(toggles[i], 'click', function(e) {
148-
e.preventDefault();
148+
var toggle = e.currentTarget;
149149

150-
if ('' !== window.getSelection().toString()) {
151-
/* Don't do anything on text selection */
150+
if (e.target.closest('a, span[data-clipboard-text], .sf-toggle') !== toggle) {
152151
return;
153152
}
154153

155-
var toggle = e.target || e.srcElement;
154+
e.preventDefault();
156155

157-
/* needed because when the toggle contains HTML contents, user can click */
158-
/* on any of those elements instead of their parent '.sf-toggle' element */
159-
while (!hasClass(toggle, 'sf-toggle')) {
160-
toggle = toggle.parentNode;
156+
if ('' !== window.getSelection().toString()) {
157+
/* Don't do anything on text selection */
158+
return;
161159
}
162160

163161
var element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
@@ -182,22 +180,6 @@
182180
toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
183181
});
184182

185-
/* Prevents from disallowing clicks on links inside toggles */
186-
var toggleLinks = toggles[i].querySelectorAll('a');
187-
for (var j = 0; j < toggleLinks.length; j++) {
188-
addEventListener(toggleLinks[j], 'click', function(e) {
189-
e.stopPropagation();
190-
});
191-
}
192-
193-
/* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
194-
var copyToClipboardElements = toggles[i].querySelectorAll('span[data-clipboard-text]');
195-
for (var k = 0; k < copyToClipboardElements.length; k++) {
196-
addEventListener(copyToClipboardElements[k], 'click', function(e) {
197-
e.stopPropagation();
198-
});
199-
}
200-
201183
toggles[i].setAttribute('data-processed', 'true');
202184
}
203185
})();

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.