How can I mutate inputted textField's String with binding action??

[JongHoooon]

Hellow everyone!

My development eviroment

• TCA: 1.10.3
• iOS Deployment Target: 16.0
• Xcode: 15.3

I want to muate inputted textField's String. ex) lowercased, trimmingCharacters, prefix...

I referenced Working with SwiftUI bindings

I tried three ways but not works😂

first try

struct ContentView: View {
    @Perception.Bindable private var store: StoreOf<ContentFeature>
    
    init(store: StoreOf<ContentFeature>) {
        self.store = store
    }
    
    var body: some View {
        WithPerceptionTracking {
            VStack {
                TextField("test", text: $store.textFieldText.sending(\.textInpuuted))
            }
            .padding()
        }
    }
}

@Reducer
struct ContentFeature {
    @ObservableState
    struct State: Equatable {
        var textFieldText: String
    }
    
    enum Action: BindableAction {
        case binding(BindingAction<State>)
        case textInpuuted(String)
    }
    
    var body: some ReducerOf<Self> {
        BindingReducer()
        
        Reduce<State, Action> { state, action in
            switch action {
            case let .textInpuuted(text):
                let newText = text.lowercased()
                state.textFieldText = newText
                return .none
                
            default:
                return .none
            }
        }
    }
}

second try

struct ContentView: View {
    @Perception.Bindable private var store: StoreOf<ContentFeature>
    
    init(store: StoreOf<ContentFeature>) {
        self.store = store
    }
    
    var body: some View {
        WithPerceptionTracking {
            VStack {
                TextField("test", text: $store.textFieldText)
            }
            .padding()
        }
    }
}

@Reducer
struct ContentFeature {
    @ObservableState
    struct State: Equatable {
        var textFieldText: String
    }
    
    enum Action: BindableAction {
        case binding(BindingAction<State>)
        case textInpuuted(String)
    }
    
    var body: some ReducerOf<Self> {
        BindingReducer()
        Reduce<State, Action> { state, action in
            switch action {
            case .binding(\.textFieldText):
                let newText = state.textFieldText.lowercased()
                state.textFieldText = newText
                return .none
            default:
                return .none
            }
        }
    }
}

thrid try

import SwiftUI

import ComposableArchitecture

struct ContentView: View {
    @Perception.Bindable private var store: StoreOf<ContentFeature>
    
    init(store: StoreOf<ContentFeature>) {
        self.store = store
    }
    
    var body: some View {
        WithPerceptionTracking {
            VStack {
                TextField("test", text: $store.textFieldText)
            }
            .padding()
        }
    }
}

@Reducer
struct ContentFeature {
    @ObservableState
    struct State: Equatable {
        var textFieldText: String
    }
    
    enum Action: BindableAction {
        case binding(BindingAction<State>)
        case textInpuuted(String)
    }
    
    var body: some ReducerOf<Self> {
        BindingReducer()
            .onChange(of: \.textFieldText) { oldValue, newValue in
                Reduce<State, Action> { state, action in
                    state.textFieldText = state.textFieldText.lowercased()
                    return .none
                }
            }
        
        Reduce<State, Action> { state, action in
            switch action {
            default:
                return .none
            }
        }
    }
}

I also referenced Performance

as I read sending actions is not lightweight so mutating inputted string every time looks not good.

Is there any good way mutating inpuuted string??

[mbrandonw]

Hi @JongHoooon, this is just a limitation of SwiftUI in general. If you were to recreate this app using either @State or @Observable you would see the same behavior. For example, this:

@Observable
class Model {
  var text = "hello" {
    didSet {
      if text != text.lowercased() {
        text = dump(text.lowercased())
      }
    }
  }
}

struct A: View {
  @Bindable var model = Model()
  var body: some View {
    Form {
      TextField("", text: $model.text)
    }
  }
}

I believe the way SwiftUI wants you to do these kinds of transformations is through formatters, which is an additional argument you can pass to TextField.

[JongHoooon]

Thank you @mbrandonw

As I know Using formatter works when keyboard return button tapped. I want to check and mutate everytime user input string.

I also tried not using action. It works well. Is this related to performance(action is not lightweight ) ??

var body: some View {
    WithPerceptionTracking {
        VStack {
            TextField("test", text: $store.textFieldText)
                .onChange(of: store.textFieldText) { newValue in
                    store.textFieldText = store.textFieldText.lowercased()
                }
        }
        .padding()
    }
}

[mbrandonw]

That trick seems good to me!

[sbilling]

This solution does not work anymore as attempting to reference the binding directly on the textfield throws Cannot assign through dynamic lookup property: subscript is get-only.

@mbrandonw any thoughts here?

[mbrandonw]

@sbilling this works fine as long as you have set up a binding reducer to unlock the store.field = value syntax.

[alvarezGarciaMarcos]

I've found the same problem. In my case I wanted to limit the length of the String that is typed by the user. I need to modify the length of the String so that when the user erases one character, the character is deleted from the limited-length String. Did you find a solution to this?

[mbrandonw]

Hi @alvarezGarciaMarcos, there is a solution from @JongHoooon in the discussion above.

[JongHyunLee84]

@JongHoooon @alvarezGarciaMarcos @mbrandonw
I've discovered something interesting but don't know why....
Using TextEditor instead of TextField works well in this second case
This allows you to create a custom TextEditor similar to TextField
Personally, I believe that mutating state outside of the reducer, as shown in this example, doesn't align with the TCA style

[mbrandonw]

Personally, I believe that mutating state outside of the reducer, as shown in #3062 (reply in thread), doesn't align with the TCA style

For what it's worth, this does not mutate state outside of the reducer. Doing store.textFieldText = … is actually sending the binding action to the reducer in order to update the state. A Store's state is always read-only, but when binding actions are available you get to user the shortened syntax store.field = … instead of store.send(.binding(\.field, …)).

[JongHyunLee84]

I thought it was directly modifying the state, but it wasn't. Thank you for letting me know.

[JongHoooon]

@mbrandonw @JongHyunLee84

I know it was not directly modifying the state. but I think view had business logic looks not good. I want to handling every business logic in the reducer.