TextField In Tab View will show space upon keyboard

Question

I'm using text field in Tab view, but when keyboard shows out. There has a space upon keyboard.

enter image description here

var body: some View {
        TabView {
            TestView()
        }
    }
var body: some View {
        VStack {
            ScrollView(.vertical, showsIndicators: false) {
                ForEach(0..<100) { data in
                    Text("\(data)")
                }
            }
            Spacer()
            HStack {
                Image(systemName: "paperplane")
                TextField("test field", text: $test)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }
        }
        .padding()
        .ignoresSafeArea(.keyboard, edges: .bottom)
    }

If I'm using without Tab view, the keyboard works totally fine.

enter image description here

I took some search and put .ignoresSafeArea(.keyboard, edges: .bottom), I don't know why it still doesn't work.

Answer 1

Modifier should be applied in correct place:

  HStack {
      Image(systemName: "paperplane")
      TextField("test field", text: $test)
          .textFieldStyle(RoundedBorderTextFieldStyle())
  }
  .ignoresSafeArea(.keyboard, edges: .bottom)  // << here !!

Tested with Xcode 13.4 / iOS 15.5