Multiline Textfield with .Vertical axis going below keyboard - ios

Question

I am having some issues with the textfield not moving up with the view.
I am using a textfield with Vertical axis (iOS 16) to create the multiline. This works correctly and stays above the keyboard as expected when it is not embedded in a scrollview. But as soon as the textfield is embedded in the scrollview the multiline just goes below the keyboard and you have to manually scroll to see the last line.
Please see code below. This should work correctly. But if you remove the scrollview you will notice the issue when typing.
struct ContentView: View {
#State private var text = "Lorem ipsum dolor sit amet. Nam voluptatem necessitatibus aut quis odio rem error repudiandae id aliquam perferendis et quidem quaerat et enim harum! Cum nesciunt animi rem quia vero aut omnis eligendi in ducimus eaque sit mollitia fugit est animi nesciunt. Ut exercitationem nulla qui dolor nihil ad autem vero quo internos sapiente eum dicta nihil qui exercitationem cumque et consectetur dolore. Et fugiat officiis non harum voluptas et modi repellendus ut repellat dolorem 33 eveniet quidem qui galisum veritatis. Id consequatur tenetur et eaque voluptas in assumenda delectus et fuga praesentium rem provident delectus est necessitatibus sunt quo dignissimos dolorum. Et reiciendis error et rerum eligendi qui illum error? In soluta ipsum est molestiae pariatur hic voluptas animi qui cupiditate amet."
var body: some View {
ScrollView {
VStack() {
TextField("Enter something", text: $text, axis: .vertical)
.textFieldStyle(RoundedBorderTextFieldStyle())
}
}
}
}
If there are any GitHub repos you know that would also be great.
Update:
I have found a solution and will be posting it in the coming days.

Answer 1

This is not a definitive answer. In the simulator some buggy behavior appears. Try this out and see on a real device (that I don't have here).
import SwiftUI
struct ContentView: View {
#State private var text = "Lorem ipsum dolor sit amet. Nam voluptatem necessitatibus aut quis odio rem error repudiandae id aliquam perferendis et quidem quaerat et enim harum! Cum nesciunt animi rem quia vero aut omnis eligendi in ducimus eaque sit mollitia fugit est animi nesciunt. Ut exercitationem nulla qui dolor nihil ad autem vero quo internos sapiente eum dicta nihil qui exercitationem cumque et consectetur dolore. Et fugiat officiis non harum voluptas et modi repellendus ut repellat dolorem 33 eveniet quidem qui galisum veritatis. Id consequatur tenetur et eaque voluptas in assumenda delectus et fuga praesentium rem provident delectus est necessitatibus sunt quo dignissimos dolorum. Et reiciendis error et rerum eligendi qui illum error? In soluta ipsum est molestiae pariatur hic voluptas animi qui cupiditate amet."
#Namespace var bottomText
var body: some View {
ScrollViewReader { proxy in
ScrollView {
Text("Title")
.font(.largeTitle)
TextField("Enter something", text: $text, axis: .vertical)
.textFieldStyle(RoundedBorderTextFieldStyle())
.onChange(of: text) { newValue in
print("Fired.")
withAnimation {
proxy.scrollTo(bottomText, anchor: .center)
}
}
Color.red.frame(height: 50).id(bottomText)
}
}
}
}

Answer 2

When TextField axis is .vertical, anchor must be .top
VStack {
// ... other code
.onSubmit {
// update state here !!
if (i + 1) < inputsValues.count {
focusedInput = i + 1
} else {
focusedInput = nil
}
}
}
.onChange(of: focusedInput) {
// When TextField axis is .vertical, anchor must be .top
proxy.scrollTo($0, anchor: .top)
}
Here is full source code.