Nested @FocusState

[seanmrich]

All the examples of @FocusState that I can find all treat focus as if it only exists in a single view. I've been trying to work out how to do this in macOS where there can be dozens of different focusable views.

You could have a single enum that holds every possible focusable item in the app. In this approach, only the root view would maintain a @FocusState property, and you'd bind this to a notional Feature.State.focus property in the reducer's state. Then you'd have to pass a binding to this focus state to the entire hierarchy of views to reach the focusable leaves. This would be pretty unwieldy and require a lot of knowledge about child features at the top level, but it would work.

Ideally, each feature would track focus for its own views in the state. Unfortunately, I don't see how to make this happen. Here's a strawman to demonstrate the issues. You can grab this demo project at https://github.com/seanmrich/Focus to check it out. First, here's a parent feature that tracks a single text field and a child feature.

struct Feature: ReducerProtocol {
  enum Focus: Hashable {
    case featureField
    case child(Child.Focus)
  }
  
  struct State: Equatable {
    var featureText: String = ""
    var childText1: String = ""
    var childText2: String = ""
    var focus: Focus? = .featureField
  }
  
  enum Action {
    case textChanged(String)
    case focusChanged(Focus?)
    case child(Child.Action)
  }
  
  var body: some ReducerProtocol<State, Action> {
    Scope(state: \.childState, action: /Action.child) {
      Child()
    }
    
    Reduce { state, action in
      switch action {
      case let .textChanged(new):
        state.featureText = new
        return .none
        
      case let .focusChanged(new):
        state.focus = new
        return .none
        
      case .child:
        return .none
      }
    }
  }
}

extension Feature.State {
  var childState: Child.State {
    get {
      .init(
        text1: childText1,
        text2: childText2,
        focus: (/Feature.Focus.child).extract(from: focus)
      )
    }
    set {
      childText1 = newValue.text1
      childText2 = newValue.text2
      if let childFocus = newValue.focus {
        focus = .child(childFocus)
      }
    }
  }
}

Now here's the child feature that tracks its own two fields:

struct Child: ReducerProtocol {
  enum Focus: Hashable {
    case field1
    case field2
  }
  
  struct State: Equatable {
    var text1: String = ""
    var text2: String = ""
    var focus: Focus? = nil
  }
  
  enum Action {
    case text1Changed(String)
    case text2Changed(String)
    case focusChanged(Focus?)
  }
  
  func reduce(into state: inout State, action: Action) -> EffectTask<Action> {
    switch action {
    case let .text1Changed(new):
      state.text1 = new
      return .none
      
    case let .text2Changed(new):
      state.text2 = new
      return .none
      
    case let .focusChanged(new):
      state.focus = new
      return .none
    }
  }
}

Finally, here's both views. Notice that each one tries to bind its focus state to the model:

struct FeatureView: View {
  let store: StoreOf<Feature>
  @FocusState private var focus: Feature.Focus?
  
  var body: some View {
    WithViewStore(store) { viewStore in
      VStack {
        TextField(
          "Feature Text",
          text: viewStore.binding(
            get: \.featureText,
            send: { .textChanged($0) }
          )
        )
        .focused($focus, equals: .featureField)
        
        ChildView(
          store: store.scope(
            state: \.childState,
            action: Feature.Action.child
          )
        )
      }
      .bind(
        viewStore.binding(
          get: \.focus,
          send: { .focusChanged($0) }
        ),
        to: $focus
      )
    }
  }
}

struct ChildView: View {
  let store: StoreOf<Child>
  @FocusState private var focus: Child.Focus?
  
  var body: some View {
    WithViewStore(store) { viewStore in
      HStack {
        TextField(
          "Text1",
          text: viewStore.binding(
            get: \.text1,
            send: { .text1Changed($0) }
          )
        )
        .focused($focus, equals: .field1)

        TextField(
          "Text2",
          text: viewStore.binding(
            get: \.text2,
            send: { .text2Changed($0) }
          )
        )
        .focused($focus, equals: .field2)
      }
      .bind(
        viewStore.binding(
          get: \.focus,
          send: { .focusChanged($0) }
        ),
        to: $focus)
    }
  }
}

As you would expect, there's a collision when the system sets the focus for each view one at a time. The view whose focus is removed always comes last so Feature.State.focus will always be reset to nil. This obviously won't work, but I don't see how you can break down nested focus states to avoid the single top-level enum. I'd greatly appreciate any advice.