After using the keyboard and going directly to the details, only half of the screen is displayed when you return

Question

By using NavigationLink directly after activating the keyboard and returning to the page, the position of the keyboard appears with a white background and the space is compressed.

Here my own speculation may be that although the keyboard has been closed, but it seems that the page does not know, if you re-click the search to activate the keyboard, and then hit enter, the page will return to normal. It seems that Navigationlink skipped the normal keyboard closing step.

But now I'm not sure how to verify my suspicions and how to solve the problem. Here is part of my code, please can someone help me, thank you very much.

import SwiftUI

struct HomePageView: View {
  @Environment(\.presentationMode) var presentationMode
  @StateObject var viewModel: HomePageViewModel
  
  var body: some View {
    ZStack(alignment: .bottomTrailing) {
      VStack{
        SearchBar(draft: $viewModel.searchDraft, barType: .item)
        ScrollView(showsIndicators: false) {
          itemListComponent
        }
      }
      .padding(.horizontal, 16)
      
      addItemButton
    }
    .onTapGesture {
      self.endTextEditing()
    }
    .sheet(isPresented: $viewModel.itemCreateViewIsShow) {
      NavigationView {
        ItemEditorView(ItemEditorViewModel(context))
      }
    }
    .background(Color("background"))
    .navigationTitle("appName".localized())
    .navigationViewStyle(.stack)
  }
  

  @FetchRequest(fetchRequest: Item.fetchAllItems()) private var items: FetchedResults<Item>
  
  @ViewBuilder
  private var itemListComponent: some View {
    HStack (alignment: .center, spacing: 0) {
      Text("item.sort.storage".localized())
      
      Spacer(minLength: 0)
    }
    .frame(height: 52)
    
    LazyVStack {
      ForEach(items) { item in
        NavigationLink(
          destination:ItemDetailView(item: item, isShowing: $viewModel.isItemDetailViewPresented)
        ) {
          ItemCellView(item: item)
        }
        .isDetailLink(false)
      }
    }
  }
  
  private var addItemButton: some View {
    Button {
      viewModel.addItemButtonPressed()
    } label: {
      Image("plus.customize")
        .resizable()
        .scaledToFit()
        .frame(width: 22, height: 22)
        .padding(17)
        .background(Color("primary"))
        .clipShape(Circle())
    }
    .padding(.trailing)
    .padding(.bottom)
  }
}

I tried to use this method to hide the keyboard, but it didn't work. https://stackoverflow.com/a/60349748/5154540 @NhatNguyenDuc — IDTIMW, Nov 15 '22 at 10:22
I experienced the same issue. Still don't know how to fix it. — NewestStackOverflowUser, Jan 28 '23 at 23:29

Shorouk Mohamed · Answer 1 · 2023-04-13T21:29:34.613

Try this UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)

when item is tapped like this:

 LazyVStack {
  ForEach(items) { item in
    NavigationLink(
      destination:ItemDetailView(item: item, isShowing: $viewModel.isItemDetailViewPresented)
      .onAppear{
                      UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
          }
    ) {
      ItemCellView(item: item)
    }
    .isDetailLink(false)
  }
}

After using the keyboard and going directly to the details, only half of the screen is displayed when you return

1 Answers1