Runtime warning when dismissing sheet with TextField focused

[seanmrich]

I have a Child feature in a sheet triggered by a Parent feature. If Child has a TextField focused when dismissing, the field sends a binding action after the destination has already been set to nil. This raises a runtime warning from TCA. Importantly, this only happens when I create the binding manually.

Here's a sample project that shows the issue if you want to test it, but this is the Child code.

Child Reducer

@Reducer
struct Child {
  @ObservableState
  struct State {
    var value = ""
  }
  enum Action: BindableAction {
    case binding(BindingAction<State>)
    case cancelButtonTapped
  }
  
  @Dependency(\.dismiss) var dismiss
  
  var body: some ReducerOf<Self> {
    BindingReducer()
    Reduce { state, action in
      switch action {
      case .cancelButtonTapped:
        return .run { [dismiss] send in
          await dismiss()
        }
        
      case .binding:
        return .none
      }
    }
  }
}

struct ChildView: View {
  @Bindable var store: StoreOf<Child>
  
  var body: some View {
    TextField(
      "Child",
      text: Binding(
        get: { store.value },
        set: { store.send(.binding(.set(\.value, $0))) }
      )
    )
    .textFieldStyle(.roundedBorder)
    .frame(maxWidth: 200)
    .toolbar {
      Button("Cancel") {
        store.send(.cancelButtonTapped)
      }
    }
  }
}

When you bind the TextField like this, you can tap the cancel button and dismiss the sheet without issue:

TextField("Child", text: $store.value)

But when you do it like this you get a runtime warning:

TextField(
  "Child",
  text: Binding(
    get: { store.value },
    set: { store.send(.binding(.set(\.value, $0))) }
  )
)

Runtime warning

An "ifLet" at "ComposableArchitecture/CaseReducer.swift:41" received a presentation action when destination state was absent. …

  Action:
    Parent.Action.destination(.presented(.child(.binding)))

This is generally considered an application logic error, and can happen for a few reasons:

• A parent reducer set destination state to "nil" before this reducer ran. This reducer must run before any other reducer sets destination state to "nil". This ensures that destination reducers can handle their actions while their state is still present.

• This action was sent to the store while destination state was "nil". Make sure that actions for this reducer can only be sent from a store when state is present, or from effects that start from this reducer. In SwiftUI applications, use a Composable Architecture view modifier like "sheet(store:…)".

Sending a specific action instead of a binding action has the same result:

TextField(
  "Child",
  text: Binding(
    get: { store.value },
    set: { store.send(.valueChanged($0)) }
  )
)

If I _printChanges on the Parent I get the following. This shows tapping the button to bring up the sheet, tapping into the TextField, and hitting the cancel button to dismiss.

Console output

received action:
  Parent.Action.view(.showChildButtonTapped)
  Parent.State(
-   _destination: nil
+   _destination: .child(
+     Child.State(
+       _value: ""
+     )
+   )
  )

received action:
  Parent.Action.destination(
    .presented(
      .child(
        .binding(.set(\State.value, ""))
      )
    )
  )
  (No state changes)

received action:
  Parent.Action.destination(
    .presented(
      .child(.cancelButtonTapped)
    )
  )
  (No state changes)

received action:
  Parent.Action.destination(.dismiss)
  Parent.State(
-   _destination: .child(
-     Child.State(
-       _value: ""
-     )
-   )
+   _destination: nil
  )

<decode: bad range for [%@] got [offs:346 len:858 within:0]>
received action:
  Parent.Action.destination(
    .presented(
      .child(
        .binding(.set(\State.value, ""))
      )
    )
  )
  (No state changes)

Not sure what I was looking for, but I also tried a vanilla SwiftUI version to see if I could gain any insight. This works as expected, but gave me no guidance on the TCA version:

Vanilla version

struct VanillaParent: View {
  @State private var showSheet = false
  
  var body: some View {
    Button("Show Sheet") {
      showSheet = true
    }
    .sheet(isPresented: $showSheet) {
      NavigationStack {
        VanillaChild()
      }
    }
  }
}

struct VanillaChild: View {
  @State private var value = ""
  @Environment(\.dismiss) var dismiss
  
  var body: some View {
    TextField("Child", text: $value)
      .textFieldStyle(.roundedBorder)
      .frame(maxWidth: 200)
      .toolbar {
        Button("Cancel") { dismiss() }
      }
  }
}

There seems to be some magic happening when you use a Binding generated from a Bindable Store. I've tried spelunking to see if I can figure out what it is, but it's too opaque for me to see what's happening. Perhaps something to do with timing of the action being sent? I also checked for previous discussions and only found this one that was close but didn't present anything actionable for me.

Can't seem to make any headway on this, so I'd appreciate any help I can get.

[mbrandonw]

Hi @seanmrich, is there a reason you are constructing a binding from scratch instead of using the tools of the library? Like this:

text: $store.value

If you do that the runtime warning is suppressed.

The reason the runtime warning is happening is because as the child view is dismissed, SwiftUI writes to the text field binding (for some reason). That causes an action to be sent, and by that point the state has been nil'd out, and hence the warning. Really it's a SwiftUI bug, but we've long lost hope of it ever being fixed.

And so we have special logic in the library for suppressing the warning under certain circumstances. If you use the binding helpers you will get access to that functionality. Also, in general, it is not a good idea to construct bindings with Binding.init(get:set:).

[seanmrich]

Thanks, @mbrandonw. In the actual project I'm some manipulation of the value. Now that I understand what's happening, I just changed how the value is bound. For anyone seeing this in the future, I was doing it inside the Binding like this:

TextField(
  "Name",
  value: Binding(
    get: {
      // Transformation logic
    },
    set: {
      let transformed = // Transformation logic
      let keyPath = // KeyPath extracted from parent view
      store.send(.binding(.set(keyPath, transformed)))
    }
  ),
  format: IntegerFormatStyle<Int>.number
)

I can accomplish the same thing like this:

extension OriginalValue {
  subscript(config configuration: MyConfiguration) -> Int {
    get {
      // Same transformation logic as the Binding getter
    }
    set {
      let transformed = // Transformation logic
      let keyPath = // KeyPath extracted from parent view
      self[keyPath: keyPath] = transformed
    }
  }
}

TextField(
  "Name",
  value: $store.value[config: configurationValue],
  format: IntegerFormatStyle<Int>.number
)

Thanks for steering me in the right direction!