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)
}
}
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)
}
}
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.



customTextFieldStylein an.overlay()somewhere, but you have to show a minimal, reproducible example for suggestions on where.