NavigationView is messing up with .prefersDefaultFocus(in:) in tvOS

Question

Created Aug ’23

Replies 1

Boosts 0

Participants 2

I am building a tvOS app which divides the screen into two parts horizontally. Both sides have buttons. I want a certain button on the right side to have focus. To achieve that I am marking the enclosing HStack with .focusScope() and then use .prefersDefaultFocus(in:) on the button which should have focus.

This works fine, even if I add another focus scope inside (see source code). But as soon as I wrap the HStack in a NavigationView it falls apart. The scope is not set as intended, instead the left view always gets the focus.

Am I missing something? Is this intended? I’m a little lost right now. I am targeting tvOS 16.4 and using Xcode 14.3.1.

Fun fact: The simulator view inside Xcode displays the view correctly. The simulator and an actual device are not.

Here is an example to showcase that:

struct ContentView: View {
  @Namespace private var mainNamespace
  @Namespace private var rightNamespace
  
  var body: some View {
//    NavigationView {
      VStack {
        Image(systemName: "globe")
          .imageScale(.large)
          .foregroundColor(.accentColor)
        Text("Hello, world!")
        
        HStack {
          VStack {
            Button("left") {}
          }
          
          VStack {
            Button("right 1") {}
            Button("right 2") {}
              .prefersDefaultFocus(in: rightNamespace)
          }
          .focusScope(rightNamespace)
          .prefersDefaultFocus(in: mainNamespace)
        }
        .focusScope(mainNamespace)
        .padding(.top, 50)
      }
      .padding()
//    }
  }
}

Boost

Answer 1

Noemata OP

Aug ’23

Not sure if this gives you what you are looking for. I've found that you run into problems when a NavigationView is too global.

import SwiftUI

struct TestSelectionView: View {
    
    @FocusState var focused: Bool?
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
            
            HStack {
                NavigationView {
                    VStack {
                        NavigationLink(destination: Text("gone to left 1").focusable(), label: {
                            Text("Left 1").focusable()
                        })
                    }
                }

                NavigationView {
                    VStack {
                        NavigationLink(destination: Text("gone to right 1").focusable(), label: {
                            Text("right 1").focusable()
                        })
                        
                        NavigationLink(destination: Text("gone to right 2").focusable(), label: {
                            Text("right 2").focusable()
                        })
                        .focused($focused, equals: true)
                        .onAppear {
                            self.focused = true
                        }
                        
                        NavigationLink(destination: Text("gone to right 3").focusable(), label: {
                            Text("right 3").focusable()
                        })
                    }
                }
            }
            .padding(.top, 50)
        }
        .padding()
    }
}

#Preview {
    TestSelectionView()
}
code-block

0