The textfield in my search bar will not allow for text to be entered (swiftUI)

Question

I have tried to implement a search bar within my app (using swiftUI), which shows up when I build the app. However, it won't allow me to type into the actual text field. My code is below. I have been searching for solutions to this problem for awhile and can't seem to see any problems in my code. Is there something wrong with my TextField?

Code for search bar -

import SwiftUI

struct SearchBar: View {
    @Binding var text: String
    @State private var isEditing = false
    
    var body: some View {
        HStack {
            TextField("Search...", text: $text)
      
               // .foregroundColor(Color("Teal"))
               // .background(Color("Grey"))
        
                
                .overlay(
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(Color(UIColor.systemGray3))
                            .frame(minWidth:0, maxWidth: .infinity, alignment: .leading)
                            .padding(EdgeInsets.init(top: 0, leading: 30, bottom: 0, trailing: 20))
                        // Search icon
                        
                        if isEditing {
                            Button(action: {
                                self.text = ""
                            }, label: {
                                Image(systemName: "multiply.circle")
                                    .foregroundColor(Color(UIColor.systemGray3))
                                    .padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 30))
                                // Delete button
                            })
                        }
                    }
                ).onTapGesture {
                    self.isEditing = true
                }
            
            if isEditing{
                Button(action: {
                    self.isEditing = false
                    
                    UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                    // Hide delete button when search bar is not selected
                }){
                }
            }
        }
    }
}

Code implementing search bar into my view -


import SwiftUI

struct BusinessList: View {
    
    @EnvironmentObject var modelData: ModelData
    @State private var showFavoritesOnly = false
    @State var searchText = ""
    
    var filteredBusinesses: [Business] {
        modelData.businesses.filter { business in
            (!showFavoritesOnly || business.isFavorite)
        }
    }
    
    
    var body: some View {
        
        NavigationView {
            ScrollView {
                LazyVStack {
                    
                    VStack {
                        
                        SearchBar(text: $searchText)
                            .padding(.bottom)
                            .padding(.top)
                            .padding(.top)
                            .padding(.top)
                            .padding(.top)
// Search bar won't show text when 'typed into'
                            
                        
                        ScrollView(.horizontal, showsIndicators: false) {
                            HStack {
                                Button(action: {
                                    showFavoritesOnly = true
                                }) {
                                    Text("Favourites")
                                        .font(.caption)
                                        .fontWeight(.medium)
                                        .foregroundColor(Color.white)
                                        .frame(width: 100.0, height: 30)
                                        .background(Color("Teal"))
                                        // How the button looks
                                        .cornerRadius(25)
                                        .zIndex(1)
                                        .textCase(.uppercase)
                                        .padding(EdgeInsets.init(top: 0, leading: 20, bottom: 0, trailing: 0))
                                }
                                Button(action: {
                                   
                                }) {
                                    Text("Hospitality")
                                        .font(.caption)
                                        .fontWeight(.medium)
                                        .foregroundColor(Color.white)
                                        .frame(width: 100.0, height: 30)
                                        .background(Color("Teal"))
                                        // How the button looks
                                        .cornerRadius(25)
                                        .zIndex(1)
                                        .textCase(.uppercase)
                                }
                                Button(action: {
                                   
                                }) {
                                    Text("Retail")
                                        .font(.caption)
                                        .fontWeight(.medium)
                                        .foregroundColor(Color.white)
                                        .frame(width: 100.0, height: 30)
                                        .background(Color("Teal"))
                                        // How the button looks
                                        .cornerRadius(25)
                                        .zIndex(1)
                                        .textCase(.uppercase)
                                }
                                Button(action: {
                                    
                                }) {
                                    Text("Lifestyle")
                                        .font(.caption)
                                        .fontWeight(.medium)
                                        .foregroundColor(Color.white)
                                        .frame(width: 110.0, height: 30)
                                        .background(Color("Teal"))
                                        // How the button looks
                                        .cornerRadius(25)
                                        .zIndex(1)
                                        .textCase(.uppercase)
                                }
                            }
                            .padding(.bottom)
                        }
                    }
                    .background(Color(UIColor.white))
                    .shadow(radius: 6)
                    .padding(.bottom)
                    
                    ForEach(filteredBusinesses) { business in
                        NavigationLink(destination: BusinessDetail(business: business)) {
                            BusinessRow(business: business)
                        }
                        
                    }
                    
                }
                
            }
            .navigationBarHidden(true)
            .ignoresSafeArea()
            
            
        }
        
    }
    
    
}
struct BusinessList_Previews: PreviewProvider {
    static var previews: some View {
        BusinessList()
    }
}

workingdog support Ukraine · Accepted Answer · 2021-07-22T23:02:10.933

your code works for me with minor changes to the colors, nothing major. Maybe the colors did not show your typing, but the text was there. This is the test I did:

import SwiftUI

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
} 
struct SearchBar: View {
    @Binding var text: String
    @State private var isEditing = false
    
    var body: some View {
        HStack {
            TextField("Search...", text: $text)
       //         .foregroundColor(Color("Teal"))
       //         .background(Color("Grey"))

                .overlay(
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.gray)
                            .frame(minWidth:0, maxWidth: .infinity, alignment: .leading)
                            .padding(EdgeInsets.init(top: 0, leading: 30, bottom: 0, trailing: 20))
                        // Search icon
                        
                        if isEditing {
                            Button(action: {
                                self.text = ""
                            }, label: {
                                Image(systemName: "multiply.circle")
                                    .foregroundColor(.gray)
                                    .padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 30))
                                // Delete button
                            })
                        }
                    }
                ).onTapGesture {
                    self.isEditing = true
                }
            
            if isEditing{
                Button(action: {
                    self.isEditing = false
                    UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                    // Hide delete button when search bar is not selected
                }){
                }
            }
        }
    }
}

struct ContentView: View {
    @State var searchText = ""
    var body: some View {
        SearchBar(text: $searchText)
            .frame(width: 222, height: 55).padding(.horizontal, 20)
            .border(.red)
    }
}

EDIT:

Your new code works for me, when you remove

.shadow(radius: 6)

and

.ignoresSafeArea()

Hi there @workingdog thank you for your help. I just changed by search bar code to remove the colours, though it still doesn't seem to show the text. I have added the full code of my view above, just in case the problem is there? — Rosalie Dil, Jul 22 '21 at 06:26
thank you so so so so much!!! Turns out that adding the shadow inhibited the textfield from being activiated, so removing it fixed the problem! — Rosalie Dil, Jul 23 '21 at 08:07

The textfield in my search bar will not allow for text to be entered (swiftUI)

1 Answers1