It seems to be a known SwiftUI issue when the `TextField` is inside a
`ToolbarItem`.
You could try this simple approach moving the `TextField outside the `ToolbarItem`.
For example:
```
struct ContentView: View {
@State private var search: String = ""
@FocusState private var isSearching: Bool
var body: some View {
NavigationStack {
VStack {
HomeFeedView()
Spacer()
HStack {
if isSearching {
Button("Close", systemImage: "xmark") {
isSearching = false
}
} else {
Button("Filter", systemImage: "line.3.horizontal.decrease") { }
}
Spacer()
TextField("Search", text: $search)
.focused($isSearching)
.border(.red) // <-- for testing
.padding(.horizontal, 10)
.submitLabel(.search)
.onSubmit {
isSearching = false
}
}
}
}
}
}
```
Here is something that works. I've done this before to make an animation happen upon an `@FocusState` property changing its value. Can't really tell you why though, it's just something I figured out with trial and error.
```
struct ContentView: View {
@State var text: String = ""
@FocusState var isFocused: Bool
@State private var showRedView = false
var body: some View {
ZStack {
VStack {
if !showRedView {
Text("How to Animate this?")
.frame(width: 300, height: 300)
.background(Color.red)
}
Text("Middle Section")
.frame(width: 300, height: 300)
.background(Color.green)
Spacer()
TextField("placeholder", text: $text)
.focused($isFocused)
}
.onChange(of: isFocused) { bool in
withAnimation(.easeInOut(duration: 5)) {
showRedView = bool
}
}
if isFocused {
Color.white.opacity(0.1)
.onTapGesture {
isFocused = false
}
}
}
}
}
```
