I'm observing an extremely bizzare behavior where the top control in a view doesn't respond to touch

Question

Created Mar ’22

Replies 0

Boosts 0

Participants 1

So I have asked this question on Stack Overflow as well: https://stackoverflow.com/questions/71374690/touch-events-seemingly-not-registering-at-top-of-screen

I'm seeing very strange behavior within a view. Here's my layout:

struct EventDetailViewContainer: View {
    
    let eventID: EventRecord.ID
    
    @State var event: EventRecord = EventRecord(keyResults: [], text: "", achievesKR: false)
    @State var editing: Bool = true
    
    var body: some View {
        if #available(iOS 15.0, *) {
            VStack {
                HStack {
                    Spacer()
                    Toggle("Editing", isOn: $editing)
                        .padding()
                }
                EventDetailView(event: $event, editing: $editing)
            }
            
        } else {
            // Fallback on earlier versions
        }
    }
}

@available(iOS 15.0, *)
struct EventDetailView: View {
    
    @Binding var event: EventRecord
    
    @Binding var editing: Bool
    @FocusState var textIsFocused: Bool
    
    
    var body: some View {
        VStack {
            TextField(
                "Event text",
                text: $event.text
            )
                .focused($textIsFocused)
                .disabled(!editing)
                .padding()
            DatePicker("Event Date:", selection: $event.date)
                .disabled(!editing)
                .padding()
            Toggle("Goal is Reached?", isOn: $event.achievesKR)
                .disabled(!editing)
                .padding()
            HStack {
                Text("Notes:")
                Spacer()
            }
            .padding()
            TextEditor(text: $event.notes)
                .disabled(!editing)
                .padding()
            Spacer()
        }
    }
}

struct EventRecord: Identifiable, Equatable {
    
    typealias ID = Identifier
    
    struct Identifier: Identifiable, Equatable, Hashable {
        typealias ID = UUID
        let id: UUID = UUID()
    }
    
    let id: ID
    
    var keyResults: [KeyResult.ID]
    
    var date: Date
    var text: String
    var notes: String
    var achievesKR: Bool
    
    init(
        id: ID = ID(),
        keyResults: [KeyResult.ID],
        date: Date = Date(),
        text: String,
        notes: String = "",
        achievesKR: Bool
        
    ) {
        self.id = id
        self.keyResults = keyResults
        self.date = date
        self.text = text
        self.notes = notes
        self.achievesKR = achievesKR
    }
    
}

So this works perfectly when I run it as an iPad app, but when I run it on the simulator, the the top toggle doesn't respond to text input.

The strange thing is, when I simply duplicate the toggle, the top one doesn't work and the bottom one works perfectly:

struct EventDetailViewContainer: View {
    
    let eventID: EventRecord.ID
    
    @State var event: EventRecord = EventRecord(keyResults: [], text: "", achievesKR: false)
    @State var editing: Bool = true
    
    var body: some View {
        if #available(iOS 15.0, *) {
            VStack {
                HStack {
                    Spacer()
                    Toggle("Editing", isOn: $editing)
                        .padding()
                }
                HStack {
                    Spacer()
                    Toggle("Editing", isOn: $editing)
                        .padding()
                }
                EventDetailView(event: $event, editing: $editing)
            }
            
        } else {
            // Fallback on earlier versions
        }
    }
}

It seems like this should be totally unrelated to the touch behavior of the other views.

Btw this is being displayed in the context of a navigation view.

Is there anything that can explain this? And how can I fix it?

Here's a gif of the behavior being demonstrated:

Boost