keyboard toolbar not showing when presenting a view via .fullScreenCover

79 Views Asked by At

I've found various other questions with workarounds but none of them seem to work. I've tried embedding views in NavigationStacks, VStacks etc. I've pinpointed the issue to having to do with .fullScreenCover because if I call the second view via .sheet:

        .sheet(isPresented: $showSecondView, content: {
            SecondView()
        })

then it works. The other testing I've done has pinpointed the issue I think down to .onAppear in the second view. If I assign focus to the first textfield using a button (see code below), then the keyboard appears with the toolbar. But if I assign focus via .onAppear, then it doesn't:

struct FirstView: View {
    
    @State var showSecondView: Bool = false
    
    var body: some View {
        
        NavigationStack {
            
            Button(action: {showSecondView.toggle()}, label: {
                Text("Show Second View")
            })
            
            .fullScreenCover(isPresented: $showSecondView, content: {
                    SecondView()
            })
            
            .navigationTitle("First View")
        }
    }
}


struct SecondView: View {
    
    @State var first: String = ""
    @State var second: String = ""
    
    
    @FocusState private var focusedTextfield: TextFields?

    
    var body: some View {
        
        NavigationStack {
            
            Button("Show Keyboard") {
                focusedTextfield = .firstTextField
            }
            
            VStack(spacing: 20) {
                TextField(text: $first) {
                    Text("first")
                }
                .focused($focusedTextfield, equals: .firstTextField)
                
                TextField(text: $second) {
                    Text("second")
                }
                .focused($focusedTextfield, equals: .secondTextField)
            }
            
            Spacer()
            
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Button(action: {}, label: { Text("Prev") })
                        
                        Button(action: {}, label: { Text("Next") })
                        
                        Spacer()
                        Button(action: {}, label: {
                            Image(systemName: "keyboard.chevron.compact.down")
                        })
                    }
                }
            
                .navigationTitle("Second View")
            
                .onAppear(perform: {
                    focusedTextfield = .firstTextField
                })
        }
    }
    
    
    enum TextFields {
        case firstTextField
        case secondTextField
    }
}
0

There are 0 best solutions below