Update form with server state (#1451)

* Update FormState from server diff

* Only update when the field is not focused

* Reset focus before submit event is sent

* Update changelog

* Add PR link

* Avoid unnecessary capture of FormModel

* Receive elementChanged on MainActor

---------

Signed-off-by: Brian Cardarella <[email protected]>
Co-authored-by: Brian Cardarella <[email protected]>

Author: carson-katri

CHANGELOG.md

@@ -12,8 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `LiveViewNative.SwiftUI.normalize_app_version/1`
 
 ## Changed
+- Submitting a form will remove focus from all fields (#1451)
 
 ## Fixed
+- Form elements will apply updates from a diff (#1451)
 - Updates to change-tracked properties no longer occur on the next RunLoop, fixing modal dismissal on macOS (#1450)
 - `+` characters are properly encoded as `%2B` in form events (#1449)
 

Sources/LiveViewNative/Coordinators/LiveViewCoordinator.swift

@@ -56,6 +56,8 @@ public class LiveViewCoordinator<R: RootRegistry>: ObservableObject {
     private(set) internal var eventSubject = PassthroughSubject<(String, Payload), Never>()
     private(set) internal var eventHandlers = Set<AnyCancellable>()
 
+    private(set) internal var liveViewModel = LiveViewModel()
+    
     init(
         session: LiveSessionCoordinator<R>,
         url: URL
@@ -396,7 +398,13 @@ public class LiveViewCoordinator<R: RootRegistry>: ObservableObject {
     private func handleJoinPayload(renderedPayload: Payload) {
         // todo: what should happen if decoding or parsing fails?
         self.rendered = try! Root(from: FragmentDecoder(data: renderedPayload))
+        
+        // FIXME: LiveForm should send change event when restored from `liveViewModel`.
+        // For now, we just clear the forms whenever the page reconnects.
+        self.liveViewModel.clearForms()
+        
         self.document = try! LiveViewNativeCore.Document.parse(rendered.buildString())
+        
         self.document?.on(.changed) { [unowned self] doc, nodeRef in
             switch doc[nodeRef].data {
             case .root:

Sources/LiveViewNative/Live/LiveView.swift

@@ -141,8 +141,6 @@ public struct LiveView<
 >: View {
     @StateObject var session: LiveSessionCoordinator<R>
 
-    @StateObject private var liveViewModel = LiveViewModel()
-    
     @Environment(\.scenePhase) private var scenePhase
 
     let phaseView: (LiveViewPhase<R>) -> PhaseView
@@ -223,7 +221,6 @@ public struct LiveView<
         .environment(\.stylesheet, session.stylesheet ?? .init(content: [], classes: [:]))
         .environment(\.reconnectLiveView, .init(baseURL: session.url, action: session.reconnect))
         .environmentObject(session)
-        .environmentObject(liveViewModel)
         .task(priority: .userInitiated) {
             await session.connect()
         }

Sources/LiveViewNative/NavStackEntryView.swift

@@ -11,7 +11,6 @@ import LiveViewNativeCore
 struct NavStackEntryView<R: RootRegistry>: View {
     private let entry: LiveNavigationEntry<R>
     @ObservedObject private var coordinator: LiveViewCoordinator<R>
-    @StateObject private var liveViewModel = LiveViewModel()
     @Environment(\.liveViewStateViews) private var liveViewStateViews
 
     init(_ entry: LiveNavigationEntry<R>) {
@@ -21,7 +20,7 @@ struct NavStackEntryView<R: RootRegistry>: View {
 
     var body: some View {
         elementTree
-            .environmentObject(liveViewModel)
+            .environmentObject(coordinator.liveViewModel)
     }
 
     private func buildPhaseView(_ phase: LiveViewPhase<R>) -> some View {

Sources/LiveViewNative/Property Wrappers/FormState.swift

@@ -66,6 +66,14 @@ public struct FormState<Value: FormValue> {
     @Environment(\.formModel) private var formModel: FormModel?
     @Environment(\.coordinatorEnvironment) private var coordinator
 
+    /// Use this with the ``SwiftUI/View/focused(_:)`` modifier to prevent server-side updates while editing.
+    @FocusState public var isFocused: Bool
+    
+    /// Use this with `onEditingChanged` callbacks to prevent server-side updates while editing.
+    ///
+    /// Prefer ``isFocused`` for elements that can be focused.
+    @State public var isEditing: Bool = false
+    
     @Event("phx-change", type: "form") private var changeEvent
 
     /// Creates a `FormState` property wrapper with a default value that will be used when no other value is present.
@@ -174,10 +182,19 @@ public struct FormState<Value: FormValue> {
     }
 
     private func resolveMode() {
+        let elementName = element.attributeValue(for: "name")
         if case .unknown = data.mode {
             if let formModel {
-                if let elementName = element.attributeValue(for: "name") {
-                    data.setFormModel(formModel, elementName: elementName)
+                if let elementName {
+                    data.bind(
+                        formModel,
+                        to: _element,
+                        elementName: elementName,
+                        attribute: valueAttribute,
+                        defaultValue: defaultValue,
+                        isFocused: $isFocused,
+                        isEditing: $isEditing
+                    )
                     formModel.setInitialValue(initialValue, forName: elementName)
                     data.mode = .form(formModel)
                 } else {
@@ -222,11 +239,43 @@ extension FormState: DynamicProperty {
 private class FormStateData<Value: FormValue>: ObservableObject {
     var mode: Mode = .unknown
     private var cancellable: AnyCancellable?
+    private var elementCancellable: AnyCancellable?
+    private var focusCancellable: AnyCancellable?
 
-    func setFormModel(_ formModel: FormModel, elementName: String) {
+    func bind(
+        _ formModel: FormModel,
+        to element: ObservedElement,
+        elementName: String,
+        attribute: AttributeName,
+        defaultValue: Value,
+        isFocused: FocusState<Bool>.Binding,
+        isEditing: Binding<Bool>
+    ) {
+        // Trigger a View update when the field's value changes.
         cancellable = formModel.formFieldWillChange
             .filter { $0 == elementName }
             .sink { [unowned self] _ in self.objectWillChange.send() }
+        
+        // When the element updates from the server, sync the new value into the form.
+        elementCancellable = element.projectedValue
+            .receive(on: DispatchQueue.main)
+            .sink { [weak self, weak formModel] _ in
+                // ignore server updates if the field is focused.
+                guard !isFocused.wrappedValue && !isEditing.wrappedValue else { return }
+                formModel?.setServerValue(
+                    element.wrappedValue.attribute(named: attribute)
+                        .flatMap { Value.fromAttribute($0, on: element.wrappedValue) }
+                        ?? defaultValue,
+                    forName: elementName
+                )
+            }
+        
+        // Remove all focus from form fields when the form is submitted.
+        focusCancellable = formModel.formWillSubmit
+            .sink { _ in
+                isFocused.wrappedValue = false
+                isEditing.wrappedValue = false
+            }
     }
 
     enum Mode {

Sources/LiveViewNative/ViewModel.swift

@@ -30,6 +30,10 @@ public class LiveViewModel: ObservableObject {
             return model
         }
     }
+    
+    func clearForms() {
+        self.forms.removeAll()
+    }
 }
 
 /// A form model stores the working copy of the data for a specific `<form>` element.
@@ -50,6 +54,9 @@ public class FormModel: ObservableObject, CustomDebugStringConvertible {
     @Published internal private(set) var data = [String: any FormValue]()
     var formFieldWillChange = PassthroughSubject<String, Never>()
 
+    /// A publisher that emits a value before sending the form submission event.
+    var formWillSubmit = PassthroughSubject<(), Never>()
+    
     init(elementID: String) {
         self.elementID = elementID
     }
@@ -84,6 +91,7 @@ public class FormModel: ObservableObject, CustomDebugStringConvertible {
     /// See ``LiveViewCoordinator/pushEvent(type:event:value:target:)`` for more information.
     @MainActor
     public func sendSubmitEvent() async throws {
+        formWillSubmit.send(())
         if let submitEvent = submitEvent {
             try await pushFormEvent(submitEvent)
         } else if let submitAction {
@@ -190,6 +198,11 @@ public class FormModel: ObservableObject, CustomDebugStringConvertible {
         }
     }
 
+    /// Set a value into the form's `data` without triggering change events.
+    public func setServerValue(_ value: (some FormValue)?, forName name: String) {
+        data[name] = value
+    }
+    
     /// Sets the value in ``data`` if there is no value currently present.
     func setInitialValue(_ value: any FormValue, forName name: String) {
         guard !data.keys.contains(name)

Sources/LiveViewNative/Views/Controls and Indicators/Pickers/DatePicker.swift

@@ -62,18 +62,22 @@ struct DatePicker<Root: RootRegistry>: View {
             SwiftUI.DatePicker(selection: $selection.date, in: start...end, displayedComponents: datePickerComponents) {
                 $liveElement.children()
             }
+            .focused(_selection.$isFocused)
         } else if let start {
             SwiftUI.DatePicker(selection: $selection.date, in: start..., displayedComponents: datePickerComponents) {
                 $liveElement.children()
             }
+            .focused(_selection.$isFocused)
         } else if let end {
             SwiftUI.DatePicker(selection: $selection.date, in: ...end, displayedComponents: datePickerComponents) {
                 $liveElement.children()
             }
+            .focused(_selection.$isFocused)
         } else {
             SwiftUI.DatePicker(selection: $selection.date, displayedComponents: datePickerComponents) {
                 $liveElement.children()
             }
+            .focused(_selection.$isFocused)
         }
 #endif
     }

Sources/LiveViewNative/Views/Controls and Indicators/Pickers/Picker.swift

@@ -36,7 +36,7 @@ struct Picker<Root: RootRegistry>: View {
     @FormState("selection") private var selection: String?
 
     var body: some View {
-        SwiftUI.Picker.init(selection: $selection) {
+        SwiftUI.Picker(selection: $selection) {
             ForEach($liveElement.childNodes(in: "content", default: true), id: \.id) { node in
                 if let element = node.asElement() {
                     // For simple Text elements, we can skip the slow element conversion, and convert directly to Text.
@@ -57,5 +57,6 @@ struct Picker<Root: RootRegistry>: View {
         } label: {
             $liveElement.children(in: "label")
         }
+        .focused(_selection.$isFocused)
     }
 }

Sources/LiveViewNative/Views/Controls and Indicators/Value Inputs/Slider.swift

@@ -90,7 +90,10 @@ struct Slider<Root: RootRegistry>: View {
                 $liveElement.children(in: "minimumValueLabel")
             } maximumValueLabel: {
                 $liveElement.children(in: "maximumValueLabel")
+            } onEditingChanged: { isEditing in
+                _value.isEditing = isEditing
             }
+            .focused(_value.$isFocused)
         } else {
             SwiftUI.Slider(
                 value: $value,
@@ -101,7 +104,10 @@ struct Slider<Root: RootRegistry>: View {
                 $liveElement.children(in: "minimumValueLabel")
             } maximumValueLabel: {
                 $liveElement.children(in: "maximumValueLabel")
+            } onEditingChanged: { isEditing in
+                _value.isEditing = isEditing
             }
+            .focused(_value.$isFocused)
         }
         #endif
     }

Sources/LiveViewNative/Views/Controls and Indicators/Value Inputs/Stepper.swift

@@ -65,11 +65,17 @@ struct Stepper<Root: RootRegistry>: View {
         {
             SwiftUI.Stepper(value: $value, in: lowerBound...upperBound, step: step) {
                 label
+            } onEditingChanged: { isEditing in
+                _value.isEditing = isEditing
             }
+            .focused(_value.$isFocused)
         } else {
             SwiftUI.Stepper(value: $value, step: step) {
                 label
+            } onEditingChanged: { isEditing in
+                _value.isEditing = isEditing
             }
+            .focused(_value.$isFocused)
         }
         #endif
     }