FormBuilder: TabMenuFormContainer + required = JS-Fehler

Ich habe ein ganz normales Formular mit Tabs. Einige Inputs davon sind ->required()

$this->form->appendChildren([
    TabMenuFormContainer::create('successStory')
        ->appendChildren([
            TabFormContainer::create('basicTab')
                ->label("seo.successStory.basic")
                ->appendChildren([
                    FormContainer::create('basicForm')
                        ->appendChildren([
                            // inputs...
                        ])
                ])
            // more TabFormContainer...
        ])
    ]);

Sendet man das Formular ohne etwas auszufüllen ab, bekommt man folgende JS-Fehlermeldung:

Scroll.js?t=1656860478:42 Uncaught Error: Cannot scroll to element, a concurrent request is running.
    at Object.element (Scroll.js?t=1656860478:42:19)
    at TabMenu.js?t=1656860478:94:42
    at NodeList.forEach (<anonymous>)
    at HTMLInputElement.<anonymous> (TabMenu.js?t=1656860478:87:69)

Nicht sicher, ob es damit zusammenhängt: Hat man den Fokus auf Tab 1 und in Tab 3 befindet sich eine textarea die auch das required-Attribut hat, passiert beim Absenden mit aktivem Tab 1 nichts und die Console sagt:

An invalid form control with name='question3' is not focusable. <textarea id="question3" name="question3" rows="10" class="long" required></textarea>

Falls es hier eine schnelle Notlösung gibt (ohne die Tabs jetzt nicht zu nutzen), wäre ich dankbar über jeden Tipp! Wir wollten mit dem Feature nämlich in 1-2 Wochen live gehen und das ist mit dem Fehler leider nicht wirklich möglich, da es viele Benutzer nicht verstehen werden, was jetzt zu tun ist.

Danke!

Das Problem aus Beitrag 1 scheint in TabMenu.js zu liegen: https://github.com/WoltLab/WCF…te/Core/Ui/TabMenu.js#L97

Dort wird versucht ein querySelectorAll per return zu beenden, was natürlich nicht funktioniert. Hier muss ein for-Loop o.Ä. genutzt werden.

Das Problem mit der Textarea liegt an der gleichen Stelle: Statt container.querySelectorAll("input, select") sollte es container.querySelectorAll("input, select, textarea") heißen. Mit den beiden Anpassungen funktioniert alles wie gewünscht.

Freue mich über einen zeitnahen Fix!

Quote from Tim Düsterhus

damit ich die Problematik richtig verstehe und es entsprechend auch so in die Commit-Nachricht aufnehmen kann: Du hast in zwei unterschiedlichen Tabs einen falschen Wert und durch den fehlerhaften Code wird der letzte „falsche“ Tab, statt der erste „falsche“ Tab gewählt?

Ja, korrekt.

Die Log-Ausgabe gibt den Tab-Namen innerhalb von querySelectorAll aus.

Ja, passt. Nur der Teil mit der Textarea fehlt noch (ansonsten switcht er nicht in den Tab mit den Textareas und der Fehler aus Beitrag #2 kommt)

Passt alles, danke!