I’m creating a view that displays a list of objects which all contain a box which is clickable. I’m having issues with only some of the boxes responding to the tap gesture. It is weird, because some of them do and others don’t… I saw other previous solutions that seemed similar but none of them worked.

This is what I tried:

import SwiftUI
import Kingfisher

struct EventStepView: View {
    
    @ObservedObject var viewModel: EventViewModel
    @EnvironmentObject var appViewModel: AppViewModel
    
    var event: Event
    
    @State private var isLocked = true // State to hold the lock status
    
    @State private var isSelected = false
    
    var body: some View {
        
        
        
        ZStack {
            KFImage(URL(string: event.image))
                .resizable()
                .scaledToFill()
                .frame(height: 70)
                .opacity(0.8)
                .clipShape(RoundedRectangle(cornerRadius: 10))
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color("FontColor"), lineWidth: 3)
                )
                .padding(.horizontal, 20)
                    
            HStack {
                VStack(alignment: .leading) {
                    Text(event.name)
                        .font(.custom("Inter-Regular_bold", size: 18))
                    Text(event.date, style: .date) // Format the date as needed
                        .font(.custom("Inter-Regular", size: 17))
                }
                .foregroundStyle(Color("FontColor"))
                
                Spacer()
                ZStack {
                    if !isLocked {
                        Image(systemName: "lock.fill")
                            .foregroundStyle(Color("FontColor"))
                            .font(.system(size: 30))
                    } else if event.attendees.contains(viewModel.userId) {
                        Image(systemName: "checkmark.diamond.fill")
                            .foregroundStyle(Color("FontColor"))
                            .font(.system(size: 30))
                    } else {
                        Image(systemName: "diamond")
                            .foregroundStyle(Color("FontColor"))
                            .font(.system(size: 30))
                    }
                }
                .onTapGesture {
                    print("X")
                    if !isLocked && appViewModel.currentUser!.id == viewModel.userId {
                        viewModel.addAttendeeToEvent(eventId: event.id!, userId: viewModel.userId)
                        isLocked = false
                        isSelected = true
                    }
                }
            }
            .padding(.horizontal, 40)
        }
        .onAppear {
            isLocked = Date() > event.date
        }
    }
}

#Preview {
    EventStepView(viewModel: EventViewModel(userId: "testId"), event: Event.defaultEvent)
}


import SwiftUI

struct EventStepsView: View {
    @ObservedObject var viewModel: EventViewModel
    
    var body: some View {
        ScrollViewReader { scrollView in
            ScrollView {
                VStack(spacing: 0) {
                    ForEach(viewModel.events) {
                        event in
                        
                        VStack(spacing:0 ) {
                            
                            EventStepView(viewModel: viewModel, event: event)
                            
                            if event != viewModel.events.last {
                                    
                                    VStack(spacing:0) {
                                        SemiCircle().rotation(.degrees(180)).frame(width:20)
                                        
                                        Rectangle().frame(width: 6, height:60)
                                        
                                        SemiCircle()
                                .frame(width:20)
                                    }
                                    .foregroundStyle(Color("FontColor"))
                                }
                            }
                            
                        }
                    }
                    .padding()
                    .onAppear {
                        scrollView
                            .scrollTo(viewModel.events.last?.id)
                    }
                    
                }
        }
        .background(Color("Background"), ignoresSafeAreaEdges: .all)
    }
}

#Preview {
    EventStepsView(viewModel: EventViewModel(userId: "testUser"))
}

And the view being accessed is this one

import SwiftUI

struct EventView: View {
    
    @Environment(.dismiss) var dismiss
    
    @ObservedObject var viewModel: EventViewModel
    
    @EnvironmentObject var appViewModel: AppViewModel
    
    var userId: String
    
    init(userId: String) {
        self.userId = userId
        _viewModel = ObservedObject(wrappedValue: EventViewModel(userId: userId))
    }
    
    var body: some View {
        NavigationStack {
            EventStepsView(viewModel: viewModel)
                .onAppear {
                    viewModel.fetchEvents()
                }
                .navigationBarTitleDisplayMode(.inline)
                .toolbarBackground(
                    Color("Background"),
                    for: .navigationBar)
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Text("FRESHERS WEEK")
                            .modifier(ViewHeadingStyle())
                    }
                    ToolbarItem(placement: .navigationBarTrailing) {
                        HStack {
                            Image(systemName: "chevron.left")
                                .imageScale(.large)
                                .foregroundColor(.white)
                                .onTapGesture {
                                    dismiss()
                                }
                        }
                    }
                }
        }
    }
}

#Preview {
    EventView(userId:"test")
}