ios - SwiftUI: Pressing TAB key from External Keyboard is not changing Focus from TextField to button when the view is inside a

admin管理员组

文章数量:1344545

Device: iPhone XR
iOS: 18.3.2
Need to support: iOS 15.0+

I am testing Accessibility with external bluetooth keyboard. I turned on Full Keyboard Access from Accessibility settings of iPhone. My app UI contains 2 textfields, 2 buttons. When pressing the TAB key from keyboard I want the focus will be moved to each UI items. Below code is working fine. There I can focus textfields and buttons and change value:

struct ContentView: View {
    @State private var count = 0
    @State var text1 = ""
    @State var text2 = ""
    @FocusState private var focusedButton: Int?
    
    var body: some View {
        VStack {
            VStack(spacing: 24.0) {
                Text("Btn Tap Count: \(count)")
                TextField("text field 1", text: $text1)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .focused($focusedButton, equals: 1)
                TextField("text field 2", text: $text2)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .focused($focusedButton, equals: 2)

                Button(action: {
                    count += 1
                }, label: {
                    Text("BTN TO Increase")
                        .padding(.vertical, 8.0)
                        .frame(maxWidth: .infinity)
                })
                .background(Color.green)
                .cornerRadius(10)
                Button(action: {
                    count -= 1
                }, label: {
                    Text("BTN TO Decrease")
                        .padding(.vertical, 8.0)
                        .frame(maxWidth: .infinity)
                })
                .background(Color.orange)
                .cornerRadius(10)
            }
            .padding(.top, 24)
            .padding()
        }
    }
}

The video is here, you can see button and textfields are getting focused properly (For high res video check this link):

But in my actual app I need these views inside a ScrollView. So I replace top most VStack with ScrollView. But this make the focus shifting trapped between textfields.

Here is the code with ScrollView:

struct ContentView: View {
    @State private var count = 0
    @State var text1 = ""
    @State var text2 = ""
    @FocusState private var focusedButton: Int?
    
    var body: some View {
        ScrollView { // only change is here from previous example
            VStack(spacing: 24.0) {
                Text("Btn Tap Count: \(count)")
                TextField("text field 1", text: $text1)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .focused($focusedButton, equals: 1)
                TextField("text field 2", text: $text2)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .focused($focusedButton, equals: 2)

                Button(action: {
                    count += 1
                }, label: {
                    Text("BTN TO Increase")
                        .padding(.vertical, 8.0)
                        .frame(maxWidth: .infinity)
                })
                .background(Color.green)
                .cornerRadius(10)
                Button(action: {
                    count -= 1
                }, label: {
                    Text("BTN TO Decrease")
                        .padding(.vertical, 8.0)
                        .frame(maxWidth: .infinity)
                })
                .background(Color.orange)
                .cornerRadius(10)
            }
            .padding(.top, 24)
            .padding()
        }
    }
}

The video is here, you can see button and textfields are not getting focused properly when pressing TAB key (For high res video check this link):

To fix it I have tried .focused($focusedButton, equals: 3) and .focused($focusedButton, equals: 4) for the 2 buttons but it is not working. Also tried with AccessibilityFocusState which is also failed. How to keep using ScrollView and keep the focus shifting behaviour like previous implementation?

本文标签：