Strange padding above the CustomKeyboard

[ChurikiTenna]

There is a strange padding on the top of the keyboard. Is there any way to remove it?

Simplified Code

extension TextField {
    func useDecimalPickerStyle() -> some View {
        self.customKeyboard(.decimalPicker)
    }
}
extension CustomKeyboard {
    static var decimalPicker: CustomKeyboard {
        CustomKeyboardBuilder { textDocumentProxy, submit, playSystemFeedback in
            DecimalPicker(handler:textDocumentProxy)
        }
    }
}

struct DecimalPicker: View {
    
    var body: some View {
        VStack(alignment:.leading) {
            HStack {
                Button(action: {
                }) {
                    Text(self.isWheel ? "キーボード入力に切り替える" : "ピッカー入力に切り替える").foregroundColor(Color.blue).font(Font.system(size: 18))
                }
                .padding()
                Spacer()
                Button(action: {
                }) {
                    Text("完了").foregroundColor(Color.blue).font(Font.system(size: 18))
                }
                .padding()
            }.background(Color(red: 245/255, green: 245/255, blue: 245/255))
        }
        .background(Color.white)
    }
}

[paescebu]

Hi @ChurikiTenna!

Thanks so much for trying out my Swift Package! Very happy to help you out!
I quickly tried your example code (had to do some adjustments for it to compile).
In my case I don't have any issues with your example code:

struct ContentView: View {
    @State private var text = "ExampleText"
    
    var body: some View {
        ScrollView {
            VStack {
                Spacer()
                TextField("Hello", text: $text)
                    .useDecimalPickerStyle()
                Spacer()
            }
            .frame(height: 800)
        }
        .background(Color.green)
    }
}

extension TextField {
    func useDecimalPickerStyle() -> some View {
        self.customKeyboard(.decimalPicker)
    }
}
extension CustomKeyboard {
    static var decimalPicker: CustomKeyboard {
        CustomKeyboardBuilder { textDocumentProxy, submit, playSystemFeedback in
            DecimalPicker(handler: textDocumentProxy)
        }
    }
}

struct DecimalPicker: View {
    let isWheel = true
    let handler: UITextDocumentProxy
    
    var body: some View {
        VStack(alignment:.leading) {
            HStack {
                Button(action: {
                }) {
                    Text(self.isWheel ? "キーボード入力に切り替える" : "ピッカー入力に切り替える")
                        .foregroundColor(Color.blue).font(Font.system(size: 18))
                }
                .padding()
                Spacer()
                Button(action: {
                }) {
                    Text("完了").foregroundColor(Color.blue).font(Font.system(size: 18))
                }
                .padding()
            }
            .background(Color(red: 245/255, green: 245/255, blue: 245/255))
            Spacer()
        }
        .frame(height: 300)
        .background(Color.red)
    }
}

Produces for me:

Could you provide maybe example code that exactly produces your issue?

Kind regards!
Pascal

[paescebu]

Another thought,
Could maybe the padding you see be coming from the bottom of the View that contains your ScrollView/Screen?
Maybe you added a padding to the whole view to omit the home bar?

FYI, if the keyboard shows, the whole View shrinks to the size above the keyboard.
Theoretically you would see the same "error" with the standard iOS Keyboard, i.e. when not using a custom keyboard

Example:

struct ContentView: View {
    @State private var text = "ExampleText"
    
    var body: some View {
        ScrollView {
            VStack {
                Spacer()
                TextField("Hello", text: $text)
                    .useDecimalPickerStyle()
                Spacer()
            }
            .frame(height: 800)
        }
        .background(Color.green)
        .padding(.bottom, 10)      //this padding potentially causing issues?
        .background(Color.blue) //padding is now highlighted in blue
    }
}

Would produce this unwanted blue padding:

[ChurikiTenna]

@paescebu

Thank you for the response.
Fixing the padding solved the issue!

Thank you for the kind support, and for making the great package.

Cheers!

[paescebu]

@ChurikiTenna
Awesome! Glad I could help!
Have a nice weekend!

:)