I have a list that searches through a nutrition api and displays the search result in a list. Up until upgrading to ios 18, everything worked flawlessly.
Now, when the list is created, sometimes the onTapGesture is recognizes and loads the fooddetail page, with other items in the list not registering taps at all?
Why would this change suddenly? I can’t figure out how to get every item in the list to be tappable now.
List(searchResults, id: .fid) { food in
VStack {
HStack {
VStack(alignment: .leading) {
Text(food.name)
.font(.system(size: 20))
.padding(.bottom, 4)
Text("(food.brand) - (extractCalories(from: food.calories) ?? "nil")")
.font(.system(size: 16))
}
.padding()
.foregroundColor(Color.white)
Spacer()
VStack {
Image(systemName: "chevron.right")
.foregroundColor(Color.white)
.padding(.trailing, 8)
}
}
.padding([.leading, .trailing], 8.0)
.padding(.top, 0)
.background(
Color(red: 40 / 255, green: 40 / 255, blue: 40 / 255)
.clipShape(RoundedRectangle(cornerRadius: 10))
)
}
.onAppear {
print(searchResults)
}
.contentShape(Rectangle()) // Ensures the entire area is tappable
/*.simultaneousGesture(TapGesture().onEnded {
print("TAPPED FOOD ID: (food.fid)")
tappedFoodID = food.fid
tappedFoodName = food.name
showFoodItemDetail = true
})*/
.onTapGesture(count: 1) {
print("TAPPED FOOD ID: (food.fid)")
tappedFoodID = food.fid
tappedFoodName = food.name
showFoodItemDetail = true
}
.listRowSeparator(.hidden)
.listRowBackground(Color.clear)
.scrollContentBackground(.hidden)
.padding(.horizontal, -16) // Remove horizontal padding for the whole list
.padding(.vertical, 0) // Remove vertical padding for the whole list
}
2
Answers
I encountered the same problem. I modified the code to the following and it worked fine.
I encountered the same issue, and I tried @ezkeemo’s solution—it worked perfectly for me! It seems the problem lies with TabView. Once I removed TabView, the tap gesture started working as expected.