major
#29808
TL Views: the <on-submit> command of a text or number <value-input> runs on Enter only, not when the field is left with a changed value
tl-layout-view 8.0.0-alpha10, ValueInputElement (#29542).
Problem
A <value-input> of a text or number type writes its channel when the value is committed, on blur or on Enter (as #29542 describes). Its <on-submit> command, however, runs only for the submit gesture (ReactFormFieldControl.hasSubmitGesture(), the submit command of the client, ValueInputElement.followSubmit): a user who types a value and leaves the field with Tab or a click sees the channel updated but the command not run. For an input whose purpose is "apply this value to the model" (the parameter value of a device in E-Home: deviceApplyValue stores a setting in a transaction and reports a refusal), the typed value stays unapplied in the field, and the view has to tell the user "Übernehmen mit Enter" in a placeholder.
A select, date or checkbox input submits on the commit of a chosen value, so only text and number inputs behave differently.
Expected
A way to run the command on every commit of the value, not only on the Enter gesture: either <on-submit> running on blur with a changed value as well (as the commit of a select does), or a separate <on-change> hook with the committed value as input. The on-submit on Enter may stay for inputs where Enter means "go" (search fields).
Workaround in E-Home
projects/device-item.view.xml: the text and number inputs of a device's parameters carry the placeholder "Übernehmen mit Enter" / "Apply with Enter"; a value left without Enter is not stored.
Lösung
<value-input> erhält das Attribut submit-on, das festlegt, wann das <on-submit>-Kommando eines getippten Eingabefelds (Text, Zahl, Passwort) läuft:
- enter (Standard): nur bei der Enter-Geste, wie bisher - für Suchfelder und Sprungfelder, bei denen Enter "los" bedeutet. Ein mehrzeiliges Textfeld, in dem Enter eine neue Zeile beginnt, führt damit kein Kommando aus.
- change: bei jeder abgeschlossenen Eingabe - durch Enter oder durch Verlassen des Felds nach einer Änderung - genau einmal pro Eingabe.
Ein Feld, aus dem gewählt wird (Auswahl, Datum, Checkbox), läuft wie bisher bei jeder Wahl; das Attribut hat dort keine Wirkung.
Der eingegebene Wert erreicht den Kanal und den Server in jedem Fall - beim Verlassen des Felds wie bei Enter - unabhängig von submit-on. Das Attribut steuert ausschließlich, ob das Kommando dabei ausgeführt wird.
Technisch:
- ReactFormFieldControl meldet mit commitsEdits(), ob sein Wert getippt wird und eine Eingabe durch Verlassen des Felds bzw. Enter abgeschlossen wird (Text ein- und mehrzeilig, Zahl, Passwort, I18N-Text). Neben dem Submit-Listener gibt es setCommitListener(...): der Client sendet dann das bestehende commit-Kommando einmal pro abgeschlossener Eingabe, nachdem der Wert das Feldmodell erreicht hat; das Ergebnis des Listeners ist das Ergebnis des Kommandos, eine Ablehnung wird dem Benutzer gemeldet. Das Zustandsflag commitOnBlur heißt jetzt commitEdits, da auch Enter eine Eingabe abschließt.
- Die Tipp-Logik aller getippten Eingaben (Debounce, Blur, Commit, Submit) steckt im Bridge-Hook useTLTypingField(), den TLTextInput, TLNumberInput, TLPasswordInput und die MUI-Adapter verwenden; useTLSubmitOnEnter() und der MUI-eigene useTypingField() entfallen. Der Leeren-Knopf eines Textfelds zählt als abgeschlossene Eingabe.
- Das Passwortfeld hat jetzt eine Enter-Geste (hasSubmitGesture()), da sein Client Enter wie das Textfeld behandelt.
- Die React-Demo (Projekte → Projektübersicht) zeigt über der Projekttabelle ein Eingabefeld "Neues Budget des gewählten Projekts" mit submit-on="change", das den Wert in einer Transaktion speichert und einen negativen Wert ablehnt.
Verwendung
Eine Anwendung, die das Kommando einer Text- oder Zahleneingabe bei jeder abgeschlossenen Eingabe laufen lassen will, setzt submit-on="change" auf dem <value-input>; der Platzhalter "Übernehmen mit Enter" entfällt dann. Ohne das Attribut bleibt das Verhalten für Text- und Zahleneingaben unverändert. Ein mehrzeiliges Text-, ein Passwort- oder ein I18N-Textfeld mit <on-submit> lief bisher bei jeder Wertänderung; ohne submit-on="change" läuft es jetzt nur mit seiner Enter-Geste (Passwort) bzw. gar nicht (mehrzeiliger Text, I18N-Text).