Cell PickerTextField is not tappable

I am trying to show a scrollview in which every cell has 3 picker text field. However, only the last cell has a working picker text field that is tappable.

When I check BasketListCell preview it is just like I wanted. All the pickers are working well with placeholders. But in scrollview it does not.

I have 3 different listData in BasketList but ShoppingCartView repeats the first one 3 times.

so this is my cell struct Basket that has 3 Int for each picker text field.

struct Basket: Identifiable {
var id: Int {
    return elementID
}
var elementID: Int
var image: String
var title: String
var brand: String
var price: String
var selectionImage: String
var discountedPrice: String
var sizeSelectedIndex: Int?
var colorSelectedIndex: Int?
var itemSelectedIndex : Int?

}

That is my demo BasketList with 3 elements.

    struct BasketList {
    static let listData: [Basket] = [
            Basket(elementID: 0, image: "Tee", title: "3-Stripes Shirt", brand: "Adidas Original", price: "$79.40", selectionImage: "checkmark", discountedPrice: "$48.99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
            Basket(elementID: 0, image: "Blouse", title: "Tuxedo Blouse", brand: "Lost Ink", price: "$50.00", selectionImage: "checkmark", discountedPrice: "$34.90", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
            Basket(elementID: 0, image: "Tee", title: "Linear Near Tee", brand: "Converse", price: "$28.50", selectionImage: "checkmark", discountedPrice: "$19.99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
        ]
}

That is my BasketCell

struct BasketListCell: View {
@State var isSelected: Bool = false
@State private var itemSelectedIndex : Int?
@State private var sizeSelectedIndex : Int?
@State private var colorSelectedIndex: Int?
var colors = ["Black", "Green", "Red", "Blue"]
var sizes = ["XS", "S", "M", "L", "XL", "XXL"]
var items = ["1", "2", "3", "4", "5", "6"]
var item: Basket
var body: some View {
HStack(spacing: 20) {
            ZStack {
                PickerTextField(data: sizes, placeHolder: "Size", lastSelectedIndex: self.$sizeSelectedIndex)
                    .overlay(
                        Image(systemName: "chevron.down")
                    )
            }
            .frame(width: UIScreen.main.bounds.width / (375/100), height: 44, alignment: .center)
            
            ZStack{
                PickerTextField(data: colors, placeHolder: "Color", lastSelectedIndex: self.$colorSelectedIndex)
                    .overlay(
                        Image(systemName: "chevron.down")
                    )
                
            }
            .frame(width: UIScreen.main.bounds.width / (375/100), height: 44, alignment: .center)
            
            ZStack {
                PickerTextField(data: items, placeHolder: "Item", lastSelectedIndex: self.$itemSelectedIndex)
                    .overlay(
                        Image(systemName: "chevron.down")
                    )
            }
            .frame(width: UIScreen.main.bounds.width / (375/100), height: 44, alignment: .center)
        }
       }

and finally, this is my ShoppingCartView

struct ShoppingCartView: View {
@State var selectedProduct = Basket(elementID: 0, image: "", title: "", brand: "", price: "", selectionImage: "", discountedPrice: "", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
@State var shown: Bool = false
var body: some View {
    ZStack {
        Color(.white)
            .edgesIgnoringSafeArea(.all)
        VStack {
            NavigationView {
                ScrollView(.vertical, showsIndicators: false) {
                    VStack(spacing: 20) {
                        ForEach(BasketList.listData) { item in
                            BasketListCell(item: item)
                                .onTapGesture {
                                    self.shown = true
                                    self.selectedProduct = item
                                }
                        }
                    }
                }

You can understand clearly my problem if you check those images better.

This is BasketListCell preview

That is my ShoppingCartView

Solution

elementID attribute of your Model class Basket needs to be unique. You currently have 3 Basket objects all with duplicate identifier, causing swiftUI to read first object every time. Changing it to some unique values should fix the problem.

Current-:

struct BasketList {
    static let listData: [Basket] = [
            Basket(elementID: 0, image: "Tee", title: "3-Stripes Shirt", brand: "Adidas Original", price: "$79.40", selectionImage: "checkmark", discountedPrice: "$48.99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
            Basket(elementID: 0, image: "Blouse", title: "Tuxedo Blouse", brand: "Lost Ink", price: "$50.00", selectionImage: "checkmark", discountedPrice: "$34.90", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
            Basket(elementID: 0, image: "Tee", title: "Linear Near Tee", brand: "Converse", price: "$28.50", selectionImage: "checkmark", discountedPrice: "$19.99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
        ]
}

Fix-:

struct BasketList {
    static let listData: [Basket] = [
            Basket(elementID: 1, image: "Tee", title: "3-Stripes Shirt", brand: "Adidas Original", price: "$79.40", selectionImage: "checkmark", discountedPrice: "$48.99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
            Basket(elementID: 2, image: "Blouse", title: "Tuxedo Blouse", brand: "Lost Ink", price: "$50.00", selectionImage: "checkmark", discountedPrice: "$34.90", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
            Basket(elementID: 3, image: "Tee", title: "Linear Near Tee", brand: "Converse", price: "$28.50", selectionImage: "checkmark", discountedPrice: "$19.99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
        ]
}