Keyboard is immediately hidden when focus TextField in LazyVStack (SwiftUI)

Question

I have a stack of cards, each card having a TextField, when focus a text field positioned at the bottom of the screen (on the area where the keyboard will appear) the card disappears, thus the keyboard disappears as well. I expect that the field is focused and scrolled automatically to the visible area. I found that the "Submit" button I have fixed at the bottom of the screen is causing the issue, so it works fine if I remove it. Another solution would be to use VStack instead of LazyVStack but I really need this Lazy behaviour since there can be lots of cards

struct ContentView: View {

   @State private var text: String = ""

   var body: some View {
       VStack {
           ScrollView {
               LazyVStack {
                   ForEach(0..<200, id: \.self) { _ in
                       CardView()
                   }
               }
           }
           Button("Submit") { }
               .frame(maxWidth: .infinity)
               .background(Color.white)
            
       }.background(Color.secondary)
   }
}

struct CardView: View {

   @State private var text: String = ""

   var body: some View {
       TextField("text", text: $text)
           .frame(height: 50, alignment: .leading)
           .background(Color.white)
   }
}

Probably yet another SwiftUI bug when using LazyVStack in a ScrollView. Works well without the LazyVStack. See also: stackoverflow.com/questions/66523786/… — workingdog support Ukraine
– workingdog support Ukraine, Commented Mar 15, 2024 at 7:53
IMHO, a text field within a row in a table view doesn't seem like the best solution anyway. ;) You may consider to show a detail view and pull up a modal when the user wants to edit something. — CouchDeveloper
– CouchDeveloper, Commented Mar 15, 2024 at 11:15

Vadim Belyaev · Accepted Answer · 2024-03-15 12:53:28Z

1

You can try putting the button inside the section footer and make the footer pinned like this:

var body: some View {
   ScrollView {
       LazyVStack(pinnedViews: .sectionFooters) {
           Section {
               ForEach(0..<200, id: \.self) { _ in
                   CardView()
               }
           } footer: {
              Button("Submit") { }
                  .frame(maxWidth: .infinity)
                  .background(Color.white)
           }
       }
   }
   .background(Color.secondary)
}

It seems to solve the issue with the disappearing keyboard (at least in the iOS 17.4 simulator), but introduces another problem where the scroll position of the focused text field gets calculated incorrectly and it gets overlapped by the footer. Not sure if it's helpful, but may be you can take it from here.

answered Mar 15, 2024 at 12:53

Vadim Belyaev

2,9572 gold badges20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sorin Lica Over a year ago

I get the same behaviour with the button as overlay and some padding on the content to push it above the button, however the focused field remains hidden under the button when keyboard is shown :(

Collectives™ on Stack Overflow

Keyboard is immediately hidden when focus TextField in LazyVStack (SwiftUI)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related