ToolbarItemGroup in .toolbar {} doesn't work in a Sheet

Question

I'm using SwiftUI 3.0, Swift 5.5 and Xcode 13.2, tested on iOS 15.3 iPhone device, and iOS 15.2 iPhone simulator.

I have tested the following.

This is a view, with a TextField, a focused state and a .toolbar

import SwiftUI

struct test: View {
    @State private var name = "Taylor Swift"
    @FocusState var isInputActive: Bool
    
    var body: some View {
        TextField("Enter your name", text: $name)
            .textFieldStyle(.roundedBorder)
            .focused($isInputActive)
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    Spacer()

                    Button(name) {
                        isInputActive = false
                    }
                }
            }
    }
}

struct test_Previews: PreviewProvider {
    static var previews: some View {
        test()
    }
}

It works perfectly as expected and it shows a button, with whatever text is typed in the TextField.

Then, when it's displayed in a sheet, there is no toolbar, though it is the same code. This is the sheet example:

import SwiftUI

struct test: View {
    @State private var name = "Taylor Swift"
    @FocusState var isInputActive: Bool
    @State var isSheetPresented: Bool = false
    
    var body: some View {
        VStack {
            Button {
                self.isSheetPresented = true
            } label: {
                Text("Open Sheet")
            }
        }
        .sheet(isPresented: $isSheetPresented) {
            TextField("Enter your name", text: $name)
                .textFieldStyle(.roundedBorder)
                .focused($isInputActive)
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()

                        Button(name) {
                            isInputActive = false
                        }
                    }
                }
        }
    }
}

struct test_Previews: PreviewProvider {
    static var previews: some View {
        test()
    }
}

Answer 1

Toolbar needs a

NavigationView

And one at the top level. Surrounding the text field.

Answer 2

Today I also experienced the same thing. I had to spent many hours until finally got the solution after reading this question. I wanted to put "Done" button over my keyboard for dismissing it after editing is finish and I used ToolbarItem(placement: .keyboard).

In my case, I mistakenly put more than one .toolbar() in different places. And it causing the "Done" button in my sheet becoming disabled, something like this (in simulator):

In order to solve the problem, please DO NOT do this:

struct SettingsView: View {
    var body: some View {
        NavigationView {
            Form {
                // Some other codes..
            }.navigationBarTitle("Settings", displayMode: .large).toolbar() { // <--- This one is a .toolbar()
            ToolbarItem{
                Button("Cancel"){
                    self.mode.wrappedValue.dismiss()
                }
            }}
        }.toolbar { // <--- This one another .toolbar() (-_-")
            ToolbarItem(placement: .keyboard) { // <--- This one is in the WRONG place!
                Button("Done") {
                    focusedField = nil
                }
            }
        }
    }
}

Instead, do the following:

struct SettingsView: View {
    var body: some View {
        NavigationView {
            Form {
                // Some other codes..
            }.navigationBarTitle("Settings", displayMode: .large).toolbar() { // Make it into a single .toolbar() ??
                ToolbarItem{
                    Button("Cancel"){
                        self.mode.wrappedValue.dismiss()
                    }
                }
                ToolbarItem(placement: .keyboard) {
                    Button("Done") {
                        focusedField = nil
                    }
                }
            }
        }
    }
}

Hope it helps.