SwiftUI Form Layout Bug with Animation - forms

Question

I have read similar descriptions about this issue but none are exactly this and the work-arounds do not seem applicable to me. I would like to know if anyone else has experienced this, if there is a way to use animation to display a Form, or if this is worth reporting as a bug to Apple.
I have ContentView with a couple of buttons which toggle a boolean. One button simply toggles the boolean while the other toggles the boolean within an animation block. The boolean controls which of two Form views are displayed. When toggled without the animation the Forms render correctly. But when toggled within the animation block, the Forms are rendered incorrectly.
This is the "Normal" (aka ReviewSheet) view.
When you tap "Edit" it switches to the BugSheet view. Looks fine.
If you pick the "Bug It" button this is how BugSheet is rendered:
The Form in BugSheet is now rendered with the first section's header overlapping an enlarged content area and in the second section, the Text is no longer rendered onto multiple lines (using lineLimit modifier has no effect).
Here is the code for each of these three views:
struct ContentView: View {
#State private var isEditing = false
var body: some View {
VStack(alignment: .leading, spacing: 0) {
HStack {
Text("Form Bug")
.font(.title)
Spacer()
// This "Edit" button just toggles isEditing and doing this
// the switch between BugSheet and ReviewSheet appears as you
// would expect.
Button(isEditing ? "Save 1" : "Edit") {
isEditing.toggle()
}
// This "Edit" button also toggle isEditing but does so within
// an animation block. The switch between BugSheet and ReviewSheet
// leaves the Form rendered improperly.
Button(isEditing ? "Save 2" :
"Bug It") {
withAnimation {
isEditing.toggle()
}
}
}
.padding()
.background(Color.orange)
.foregroundColor(.white)
if isEditing {
BugSheet()
} else {
ReviewSheet()
}
}
}
}
struct ReviewSheet: View {
#State private var titleText: String = "Example Title"
#State private var shortDescription: String = "This should work"
#State private var keywords: String = "swiftui, apple, form, bug"
let longDescription = "The rain in Spain stays mainly on the Plains even while the quick brown fox jumps over the lazy dog."
var body: some View {
Form {
Section(header: Text("Title")) {
Text(titleText)
}
Section(header: Text("Details")) {
Text(shortDescription)
Text(longDescription)
Text(keywords)
}
}
}
}
struct BugSheet: View {
enum Field: Hashable {
case title
case shorty
case keywords
}
#FocusState private var focusedField: Field?
#State private var titleText: String = ""
#State private var shortDescription: String = ""
#State private var keywords: String = ""
#State private var notes: String = "This is a starter note."
let longDescription = "The rain in Spain stays mainly on the Plains even while the quick brown fox jumps over the lazy dog."
private func gotoField(_ field: Field) {
focusedField = field
}
var body: some View {
Form {
Section(header: Text("Title")) {
TextField("title here", text: $titleText, onCommit: {gotoField(.shorty)})
.autocapitalization(.words)
.disableAutocorrection(false)
.keyboardType(.default)
.focused($focusedField, equals: .title)
}
Section(header: Text("Details")) {
TextField("short description", text: $shortDescription, onCommit: {gotoField(.keywords)})
.autocapitalization(.sentences)
.disableAutocorrection(false)
.keyboardType(.default)
.focused($focusedField, equals: .shorty)
Text(longDescription)
TextField("keywords", text: $keywords, onCommit: {gotoField(.title)})
.autocapitalization(.none)
.disableAutocorrection(true)
.keyboardType(.default)
.focused($focusedField, equals: .keywords)
}
}
}
}