Truncating text with onReceive

[jharvey3]

In the various Concise Forms case studies there is an action that forces the displayName to always be 16 characters or less. This succeeds as far as the state variable displayName is concerned, but the TextField shows every character typed even though the variable itself is only 16 characters long.

If one isn't using TCA you could get the TextField to mirror the state (i.e. Never display more than 16 characters) like this:

struct ContentView: View {
  @State  var userName = ""
    var body: some View {
      Form {
        TextField(
            "User Name",
            text: $userName
          )
          .onReceive(Just(userName)) { _ in
              limitText()
          }
        .padding()
      }
    }
  
  func limitText() {  
    if userName.count > 16 {
      print("limitText is truncating")
      userName = String(userName.prefix(16))
    }
  }
}

I don't understand how to achieve the same behavior when using TCA.

I've tried this:

TextField(
              "User Name",
              text: viewStore.binding(
                get: \.userName,
                send: TruncateTextAction.userNameChanged
              )
            )
            .onReceive(Just(viewStore.userName)) { _ in
              let _ = print("in OnReceive")
              viewStore.send(.userNameChanged(viewStore.userName))
            }

Which results in onReceive never being called

And this:

.onReceive(viewStore.publisher) { _ in
              let _ = print("in OnReceive")
              viewStore.send(.userNameChanged(viewStore.userName))
  }

Which also results in onReceive never being called.

I'm sure I just don't understand the TCA well enough to figure this out. Thanks

[iampatbrown]

Hey @jharvey3,

I'd say use .onChange instead of .onReceive and add an action responsible for truncating the userName

So your example would look something like this

// Reducer
...
case .truncateUserName:
    state.userName = String(state.userName.prefix(16))
    return .none
...

// View
...
TextField(
  "User Name",
  text: viewStore.binding(
    get: \.userName,
    send: TruncateTextAction.userNameChanged
  )
)
.onChange(of: viewStore.userName) { _ in viewStore.send(.truncateUserName) }
...

Here is a discussion (#761) that goes into it a little bit more with some other options as well.

[jharvey3]

Thank you.