Value Change Triggers Twice in Shared SwiftUI TextField Component (Not Using TCA)

[faithinker]

Hi everyone,

I’m building a reusable common TextField component to be used across multiple screens in a TCA-based app.
To avoid nested reducer complexity and based on discussions like #1093 and #3515, I intentionally implemented this TextField as a pure SwiftUI view, not using TCA inside the component itself.

However, I’m facing an issue:
When I type into the field, the parent view’s onChange (or .binding(...)) triggers twice for every input — once for .onAppear (due to initial focus) and again for every keystroke.

Here’s the situation:

struct CCTextField: View {
  @Binding var text: String
  var placeholder: String = ""
  var onClear: (() -> Void)? = nil

  var body: some View {
    HStack(spacing: 8) {
      TextField(placeholder, text: $text)
        .autocorrectionDisabled()
        .textInputAutocapitalization(.never)
        .padding(12)
        .background(Color(.systemGray6))
        .cornerRadius(8)

      if !text.isEmpty {
        Button {
          if let onClear = onClear {
            onClear()
          } else {
            text = ""
          }
        } label: {
          Image(systemName: "xmark.circle.fill")
            .foregroundColor(.gray)
        }
      }
    }
    .padding(.horizontal)
  }
}

The child CommonTextField is a plain SwiftUI component

@Reducer
struct LoginFeature {
  @ObservableState struct State: Equatable {
    var searchText = ""
  }

  enum Action: Equatable, BindableAction {
    case binding(BindingAction<State>)
  }

  var body: some Reducer<State, Action> {
    BindingReducer()
    Reduce { state, action in
      switch action {
      case .binding(\.searchText):
        print("Input Value:", state.searchText)
              return .none
      default:
        return .none
      }
    }
  }
}

The parent reducer holds the state

struct LoginView: View {
    @Bindable var store: StoreOf<LoginFeature>

    var body: some View {
        VStack(spacing: 20) {

            CCTextField(
              text: $store.searchText,
              placeholder: "Search...",
              onClear: {
                
              }
            )
            .padding(.horizontal ,20)
        }
        .navigationBarHidden(true)
    }
}

The Parent View

Result Log ScreenShots

Questions:
1. Is there a recommended way to suppress the redundant initial event on appear or focus?
2. Should I write a wrapper like:

extension Binding where Value: Equatable {
  func uniqueUpdates() -> Self {
    var last: Value?
    return Binding(
      get: { wrappedValue },
      set: { new in
        guard new != last else { return }
        last = new
        wrappedValue = new
      }
    )
  }
}

as a workaround?

---

I have another question.
Is creating shared components using TCA against the principles of the Composable Architecture?
For example, like the code below.

@Reducer
public struct CTextFieldFeature {
    @ObservableState
    public struct State: Equatable {
        public var text: String = ""
        public var placeholder: String
        public var isEnabled: Bool = true
        public var isSecure: Bool = false

        public var isFocused: Bool = false

        public init(
            placeholder: String = "",
            isEnabled: Bool = true,
            isSecure: Bool = false,
        ) {
            self.placeholder = placeholder
            self.isEnabled = isEnabled
            self.isSecure = isSecure
        }

        public var fieldState: FieldState {
            guard isEnabled else { return .disabled }
            return isFocused ? .focus : .default
        }

        public enum FieldState {
            case `default`, focus, disabled
        }
    }

    public enum Action: BindableAction {
        case binding(BindingAction<State>)
        case didBeginEditing
        case didEndEditing
        case clearText
    }

    public var body: some Reducer<State, Action> {
        BindingReducer()
        Reduce { state, action in
            switch action {
            case .didBeginEditing:
                state.isFocused = true
                return .none

            case .didEndEditing:
                state.isFocused = false
                return .none

            case .clearText:
                state.text = ""
                return .none
            default: return .none
            }
        }
    }
}

Component Child Reducer

enum CTextFieldStyle {
    case plain
    case search
    case password
}

public struct CTextField: View {
    @Bindable var store: StoreOf<CTextFieldFeature>
    @FocusState private var isFocusedField: Bool
    
    var style: CTextFieldStyle = .plain

    public var body: some View {
        ZStack(alignment: .trailing) {
            HStack {
                if style == .search {
                    Image(systemName: "magnifyingglass")
                        .foregroundColor(.gray)
                }
                if style == .password {
                    SecureField(store.placeholder, text: $store.text)
                        .focused($isFocusedField)
                        .disabled(!store.isEnabled)
                } else {
                    TextField(store.placeholder, text: $store.text)
                        .focused($isFocusedField)
                        .disabled(!store.isEnabled)
                        .autocorrectionDisabled()
                        .autocapitalization(.none)
                }
            }
            .padding(.horizontal, 12)
            .padding(.vertical, 15)
            .foregroundStyle(CGMSAsset.blackWhiteColor.swiftUIColor)
            .background(backgroundColor)
            .font(CGMSFontFamily.Pretendard.medium.swiftUIFont(size: 16))
            .cornerRadius(8)
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(borderColor, lineWidth: 2)
            )

            if !store.text.isEmpty && store.isEnabled {
                Button {
                    store.send(.clearText)
                } label: {
                    Image(systemName: "xmark.circle.fill")
                        .foregroundColor(.gray)
                }
                .padding(.trailing, 8)
            }
        }
        .onChange(of: isFocusedField) { oldValue, newValue in
            store.send(newValue ? .didBeginEditing : .didEndEditing)
        }
    }

    private var backgroundColor: Color {
        switch store.fieldState {
            case .default, .focus: CGMSAsset.textfieldDefault.swiftUIColor
            case .disabled: CGMSAsset.textfieldDisabled.swiftUIColor
        }
    }

    private var borderColor: Color {
        switch store.fieldState {
        case .focus: CGMSAsset.blueColor.swiftUIColor
        default: .clear
        }
    }
}

Component Child View

@Reducer
struct LoginFeature {
    @ObservableState
    struct State: Equatable {
        var emailField = CTextFieldFeature.State(
            placeholder: Strings.emailPlaceholder
        )
        var passwordField = CTextFieldFeature.State(
            placeholder: Strings.passwordPlaceholder,
            isSecure: true
        )
    }

    enum Action: BindableAction {
        case binding(BindingAction<State>)
    }

 
    var body: some ReducerOf<Self> {
        BindingReducer()
        
        Scope(state: \.emailField, action: \.emailField) {
            CTextFieldFeature()
        }
        
        Scope(state: \.passwordField, action: \.passwordField) {
            CTextFieldFeature()
        }
        
        Reduce { state,action in
            switch action {
                case .emailField(.binding(\.text)):
                    print("이메일 입력값:", state.emailField.text)
                    return .none
                case .passwordField(.binding(\.text)):
                    print("비밀번호 입력값:", state.passwordField.text)
                    return .none
                 default: return .none
            }
        }
    }
}

Login Feature

struct LoginView: View {
    @Bindable var store: StoreOf<LoginFeature>
    
    var body: some View {
        
        ZStack {
                VStack(spacing: 16) {
                    CTextField(store: store.scope(state: \.emailField, action: \.emailField))
                    
                    CTextField(store: store.scope(state: \.passwordField, action: \.passwordField), style: .password)
                 }
                .padding(.horizontal, 16)
        }
    }
}                

LoginView

Any thoughts or official best practices would be appreciated!

Thanks 🙌

[mbrandonw]

Hi @faithinker, the issue you linked to above, #1093, shows that the double action being sent is a vanilla SwiftUI problem, not a TCA problem. And so wrapping a TextField in a vanilla SwiftUI CCTextField view isn't going to help anything.

There is another discussion of this problem in #808 where we show that you can introduce a Binding.removeDuplicates() function to prevent the double action from firing, and also someone mentions that .plain text fields do not have this bug, so you could try that too.

Is creating shared components using TCA against the principles of the Composable Architecture?

No, there is no problem with that in general, but also your CTextFieldFeature really isn't carrying its weight. It has very minimal logic and no side effects or dependencies. This seems like a perfect use case for a vanilla SwiftUI view that uses a @Binding, and then derive bindings from your TCA features to hand to this view.

We think generic, reusable TCA components really only makes sense for significantly complicated components. Typically things that have very nuanced logic and side effects that you would like to be able to test in isolation and have guarantees that it works when plugged into larger systems.

[faithinker]

So for simple components, it’s better to use a regular SwiftUI view with @Binding rather than wrapping it with TCA state and actions. Thanks for the clarification!