[bug] data-powermail-morestep-show fails when clicking nested elements (e.g. SVG inside button)

[derkoerber]

Summary

When using Powermail multi-step forms, we encountered an issue when the navigation button contains nested elements (e.g. an SVG icon).

TYPO3 / Powermail Version

• TYPO3: 13.4.22
• Powermail: 13.0.4

Example markup with TailwindCSS:

<f:if condition="{settings.main.moresteps} && !{iterationPages.isLast}">
    <div class="powermail_fieldwrap powermail_tab_navigation absolute bottom-0 left-0 w-full">
        <button
            type="button"
            class="btn btn-primary ..."
            data-powermail-morestep-show="{iterationPages.cycle}"
            data-powermail-morestep-previous
            title="Prüfen und weiter zum nächsten Schritt"
            aria-label="Prüfen und weiter zum nächsten Schritt"
        >
            weiter
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18" class="w-6 rotate-180">
                <path fill="currentColor" d="...."/>
            </svg>
        </button>
    </div>
</f:if>

If the user clicks on the SVG inside the button, an error occurs because the JavaScript reads the attribute from event.target.

Relevant code from MoreStepForm.js:

let showListener = function() {
  let moreButtons = document.querySelectorAll('[data-powermail-morestep-show]');
  for (let i = 0; i < moreButtons.length; i++) {
    moreButtons[i].addEventListener('click', function(event) {
      let targetFieldset = event.target.getAttribute('data-powermail-morestep-show');

When clicking the SVG, event.target refers to the svg-element instead of the button-element, which does not have the attribute data-powermail-morestep-show.
This leads to an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at m.showFieldset (Form.min.js?1760518764:1:3157)
    at HTMLButtonElement.<anonymous> (Form.min.js?1760518764:1:3682)

Expected behavior:

Clicking anywhere inside the button (including nested elements like SVG icons) should trigger the step navigation correctly.

Suggested fix

Use event.currentTarget instead of event.target, since the event listener is attached to the button element.

let showListener = function() {
  let moreButtons = document.querySelectorAll('[data-powermail-morestep-show]');
  for (let i = 0; i < moreButtons.length; i++) {
    moreButtons[i].addEventListener('click', function(event) {
      let targetFieldset = event.currentTarget.getAttribute('data-powermail-morestep-show');

This ensures the attribute is always read from the button element that registered the event listener.

Note: We fixed it by setting pointer-events-none to our svg so it is not clickable. But i think this minor fix might be the better solution overall.