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()
    }
}

Answer 1

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()