Query encode + characters in form events (#1449)

* Query encode `+` characters in form events

* Use `replacing` instead of `replacingOccurrences`

* Update CHANGELOG.md

* Revise changelog wording

* Add PR link

* Encode each query item

Author: carson-katri

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Changed
 
 ## Fixed
+- `+` characters are properly encoded as `%2B` in form events (#1449)
 
 ## [0.3.0] 2024-08-21
 

Sources/LiveViewNative/ViewModel.swift

@@ -93,7 +93,7 @@ public class FormModel: ObservableObject, CustomDebugStringConvertible {
 
     /// Create a URL encoded body from the data in the form.
     public func buildFormQuery() throws -> String {
-        return try buildFormURLComponents().query!
+        return try buildFormURLComponents().formEncodedQuery!
     }
 
     private func sendChangeEventForFormElement(_ value: any FormValue, for name: String, _ sendEvent: ((Any) async throws -> ())?) -> (() async throws -> Void)? {
@@ -113,7 +113,7 @@ public class FormModel: ObservableObject, CustomDebugStringConvertible {
                 .init(name: "_target", value: name)
             ]
 
-            try await event(components.query!)
+            try await event(components.formEncodedQuery!)
         }
     }
 
@@ -124,7 +124,7 @@ public class FormModel: ObservableObject, CustomDebugStringConvertible {
             var components = try self.buildFormURLComponents()
             components.queryItems?.append(.init(name: "_target", value: name))
 
-            try await event(components.query!)
+            try await event(components.formEncodedQuery!)
         }
     }
 
@@ -206,3 +206,16 @@ public class FormModel: ObservableObject, CustomDebugStringConvertible {
     }
 
 }
+
+private extension URLComponents {
+    var formEncodedQuery: String? {
+        var components = self
+        components.queryItems = components.queryItems?.map({
+            .init(
+                name: $0.name,
+                value: $0.value.flatMap({ $0.addingPercentEncoding(withAllowedCharacters: .alphanumerics) })
+            )
+        })
+        return components.query!
+    }
+}