SwiftUI Textfield with value validation when submitted - swift

Question

I tried to build a NumberField from a TextField where the value is validated and pushed along the Binding only when the .onSubmit modifier is called. The logic seems to work fine but you will see that the NumberField is not updated properly when the submitted value is outside the specified range.
Here's my code for the View:
struct NumberField: View {
init(
value: Binding<Double>,
range: ClosedRange<Double>
) {
self._value = value
self.range = range
self._valueStore = State(initialValue: value.wrappedValue)
}
#Binding var value: Double
let range: ClosedRange<Double>
#State private var valueStore: Double
var body: some View {
TextField(
"",
value: .init(
get: {
valueStore
},
set: { newValue in
valueStore = validate(
newValue,
range: range
)
}),
formatter: NumberFormatter()
)
.onSubmit {
value = valueStore
}
.onChange(of: value) { newValue in
guard newValue != valueStore else {
return
}
valueStore = newValue
}
}
func validate(_ newValue: Double, range: ClosedRange<Double>) -> Double {
let validatedValue = clamp(newValue, to: range)
print("validate - newValue: \(newValue) - validated: \(validatedValue)")
return validatedValue
}
func clamp(_ value: Double, to range: ClosedRange<Double>) -> Double {
min(max(range.lowerBound, value), range.upperBound)
}
}
You can use it like so in a playground (or a macOS app):
struct MainView: View {
#State var value = 2.0
var body: some View {
VStack {
Text("value: \(value)")
NumberField(value: $value, range: 2.0 ... 10)
NumberField(value: $value, range: 2.0 ... 10)
}
.frame(width: 200)
.padding()
}
}