Dismissing underlying sheet when an alert is shown

[Muhammed9991]

I have a button on a sheet, when pressed opens up an alert. Is it possible to dismiss the underlying sheet when the alert is displayed? Otherwise I get this weird behaviour, when pressing cancel, the alert disappears then the sheet. The same issue is when opening a full screen cover or sheet from a button on the existing sheet.

Here's some sample code about the issue:

import SwiftUI
import SwiftUINavigation

struct SampleSheet: View {
    @StateObject var sampleSheetViewModel: SampleSheetViewModel = SampleSheetViewModel()
    
    var body: some View {
        VStack {
            Button {
                sampleSheetViewModel.openSheet()
            } label: {
                Text("Main screen")
            }
            .sheet(
                unwrapping: self.$sampleSheetViewModel.destination,
                case: /SampleSheetViewModel.Destination.someSheet
            ) { _ in
                SheetContent()
            }
            
        }
    }
}

struct SheetContent: View {
    @StateObject var sheetContentViewModel: SheetContentViewModel = SheetContentViewModel()
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        Button {
            sheetContentViewModel.destination = .alert(
                AlertState(
                    title: {
                        TextState("Some random alert")
                    },
                    actions: {
                        ButtonState(
                            action: .send(.okay),
                            label: {
                                TextState("OK")
                            })
                    })
                
            )
        } label: {
            Text("Hello")
        }
        .alert(
            unwrapping: self.$sheetContentViewModel.destination,
            case: /SheetContentViewModel.Destination.alert
        ) { action in
            switch action {
            case .okay:
                dismiss()
            case nil:
                break
            }
        }
    }
}

class SheetContentViewModel: ObservableObject {
    @Published var destination: Destination?
    
    enum Destination {
        case alert(AlertState<AlertAction>)
    }
    
    enum AlertAction {
        case okay
    }
}


class SampleSheetViewModel: ObservableObject {
    @Published var destination: Destination?
    
    enum Destination {
        case someSheet
    }

    func openSheet() {
        self.destination = .someSheet
    }
}

Sample video:

Screen.Recording.2023-02-05.at.16.43.48.mov

[tgrapperon]

Hey @Muhammed9991!
I don't find the effect particularly weird, but in any case, you can't dismiss the sheet while the alert is presented if the alert is itself anchored to the sheet's content. In other words, the alert needs the sheet content to exist. BTW, you're not cancelling when "OK" is pressed here, you're effectively calling dismiss for the sheet presentation, so the sheet being dismissed makes sense. Alerts (or confirmation dialogs) always dismiss themselves when you interact with any button.
If this is indeed the behavior that you're looking for, you can maybe add the alert besides the sheet instead of inside, as in this case, the alert will be able to exist independently of the sheet.

[Muhammed9991]

How would you override the cancel behaviour though? I know I can create another action called cancel but using another ButtonState will just add another button to the `confirmation dialog. E.g.

ConfirmationDialogState(title: {
                    TextState("Some random alert")
                }, actions: {
                    ButtonState(
                        action: .send(.okay),
                        label: {
                            TextState("OK")
                        })
                    
                    ButtonState(
                        action: .send(.cancel),
                        label: {
                            TextState("Cancel")
                        })
                })

But this doesn't override the cancel button right?

[Muhammed9991]

Still haven't managed to figure this one out @tgrapperon.

[tgrapperon]

Hey @Muhammed9991! Sorry, I didn't get or I missed the notification for your last reply. You simply need to add role: .cancel to the cancel button, and it will be promoted as the built-in "Cancel" button:

ButtonState(role: .cancel, action: .send(.cancel)) {
  TextState("Cancel")
}

You need iOS 15+ though.

[Muhammed9991]

Thanks @tgrapperon I'll give that a go. Thanks

[Muhammed9991]

Working beautifully. Thanks. I didn't realise there was a role option for the button 🥲.