Adjust View up with Keyboard show in SwiftUI 3.0 iOS15

Viewed 407

I have sign up page with a VStack embedded in a ScrollView that's embedded in a VStack. In the innermost VStack I have a series of TextFields with a custom TextFieldStyle.

The UI of the signup page looks like this:

    VStack {
        ScrollView {
            VStack(spacing: 24) {
                TextField(text: $firstNameText) {
                    Text(.firstNameLabel)
                }
                .textFieldStyle(.customTextfieldStyle())
                TextField(text: $lastNameText) {
                    Text(.lastNameLabel)
                }
                .textFieldStyle(.customTextfieldStyle())
            }
        }
        Spacer()
        Button(action: submit) {
            Text(.nextButtonTitle)
        }
    }

Signup Form

Next, the customTextfieldStyle looks like this:

        VStack(alignment: .leading, spacing: 0) {
            configuration
                .font(.bodyBook14)
                .padding(.bottom, 16)
            Rectangle()
                .fill(errors.isEmpty ? Color.primary : .errorRed)
                .frame(height: 1)
            ForEach(errors) { error in
                Text(error.title)
                    .font(.bodyBook14)
                    .foregroundColor(.errorRed)
                    .padding(.top, 8)
            }
        }

textfield style

In my custom textfield style I added a rectangle and an error text. The problem I'm having is with this custom style, the rectangle and error messages below the textfield is being covered on focus. the keyboard avoidance doesn't offset enough of the scrollview to display them to the user. The keyboard properly offsets the view just enough to show only the textfield but not the rectangle and error messages. Is it possible to make the keyboard recognize the entire custom textfield style should shift up?

Screenshot below shows how error text is all covered by the keyboard / button. enter image description here

0 Answers
Related