This issue appeared in combination with the "Field Group" module, through issue 🐛 HTML inside the "Vertical Tabs" "Tab" label is being removed and escaped Postponed and ✨ Add option to allow HTML in labels Fixed .
The core "vertical-tabs.js" uses "textContent" in line 89 of "core/misc/vertical-tabs.js" to render the tab labels instead of "innerHTML".
Element.innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML.
See: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
When this is changed, the HTML is used, but still gets escaped.
Here is a screenshot, where the tabs are rendered as details elements with the correct title for a split second:
And here the final rendered vertical tabs with the "broken" tab titles:
Use innerHTML instead and "lower" the amount of escaped HTML (e.g. using Xss::filterAdmin).
Needs work
11.0 🔥
Last updated
Affects the content, performance, or handling of Javascript.
The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.
Thanks @PrabuEla, could you please add a test to prove it works?