SwiftUI ToolbarItemGroup for Keyboard on iOS16

Question

Due to the new NavigationStack having quite a few problems, including a pretty significant memory leak at this time, I am still using the old NavigationView with a build target of iOS 15+.

However, devices running iOS 16 are no longer showing the ToolbarItemGroup contents in the keyboard. ToolbarItem(placement: .navigationBarTrailing) works perfectly, but ToolbarItemGroup(placement: .keyboard) no longer shows the contents.

Here's the code I am using for the keyboard toolbar items:

.toolbar {
    ToolbarItemGroup(placement: .keyboard) {
        HStack {
            Spacer()
            Button {
                isFocused = nil
            } label: {
                Image(systemName: "keyboard.chevron.compact.down")
            }
        }
    }
}

This should show the image at the top of the keyboard, allowing the user to unfocus on tap. It works perfectly on iOS 15 but nothing shows on a device running iOS 16.

I am testing on a real device, not the simulator.

Doriedorin

Answer 1

The following worked for me on iOS 16.2

I had exactly the same issue. Unfortunately, @kittonian's solution did not work for me, but the following did: keeping the HStack, but adding an empty Text element on its left.

.toolbar {
    ToolbarItem(placement: .keyboard) {
        HStack {
            Text("")
            Spacer()
            Button("Done") {
                field = nil
            }
        }
    }
}

Ticking

Thanks - this saved me a lot of time! – Thermal

Answer 2

This seems to be yet another iOS 16 bug. It appears that if you wrap your entire keyboard toolbar in an HStack it will not appear in iOS 16, however, if you imagine that an HStack is implicitly surrounding all of your keyboard toolbar elements in the first place, and subsequently remove the HStack wrap, everything works as it should.

Additionally, as long as your entire keyboard toolbar is NOT wrapped in an HStack, you may have sub-HStack elements in your toolbar.

Here's the solution:

.toolbar {
    ToolbarItemGroup(placement: .keyboard) {
        Spacer()
        Button {
            isFocused = nil
        } label: {
            Image(systemName: "keyboard.chevron.compact.down")
        }
    }
}

Doriedorin