Issue with SwiftUI displaying Alert – Will not display alert box

Question

I have the following code:

@State private var signoutAlert = false

var body: some View {

    Button(action: {
      
        self.signoutAlert = true
        
        print("signout button clicked")
        
    }) {
        
        Text("Sign Out")
    
    }
    .alert(isPresented: $signoutAlert) {
        
        print(".alert will display")
        //
        return Alert(title: Text("Sign Out"), message: Text("Are you sure you want to Sign Out?"), primaryButton: .destructive(Text("Sign Out")) {
            
            print("Signing out....")
          
            self.session.signOut()

            self.presentationMode.wrappedValue.dismiss()
            
        }, secondaryButton: .cancel())
    
    }

}

The following output prints out:

signout button clicked
.alert will display

I'm expecting the Alert Box to display and prompt the user to either "Cancel" or "Sign Out" by click one of the two buttons; but it is never displayed or prompts the user, which makes no sense!?

Does anyone see anything wrong with my code!? This is extremely frustrating since it should be very simple!?

Ken Chin-Purcell · Answer 1 · 2020-12-30T00:33:37.487

I've had this problem when there is an .alert(...) view modifier on a view further up the view hierarchy. If a parent view has an .alert() defined on it then a child's .alert() modifier will not display it's alert.

In my case I moved the .alert() on the high level view down to be a modifier on the Button that triggered it, and now both alerts display correctly. For example:

struct HiddenWalrusView: View {
    @State private var showAlert1 = false
    @State private var showAlert2 = false
    
    var body: some View {
        VStack {
            Button("Show Alert One") { showAlert1 = true }
                .padding(20)
            Button("Show Alert Two") { showAlert2 = true }
                .padding(20)
                .alert(isPresented: $showAlert2) {
                    // This alert never displays
                    Alert(title: Text("I am the Walrus"))
                }
        }
        .alert(isPresented: $showAlert1) {
            Alert(title: Text("I am the Egg Man"))
        }
    }
}

struct EggmanAndWalrusView: View {
    @State private var showAlert1 = false
    @State private var showAlert2 = false
    
    var body: some View {
        VStack {
            Button("Show Alert One") { showAlert1 = true }
                .padding(20)
                .alert(isPresented: $showAlert1) {
                    Alert(title: Text("I am the Egg Man"))
                }
            Button("Show Alert Two") { showAlert2 = true }
                .padding(20)
                .alert(isPresented: $showAlert2) {
                    Alert(title: Text("I am the Walrus"))
                }
        }
    }
}

Hi, do you have any idea why the Alert need to be defined in the containing view of the buttom ? I though that the Alert is unbound to the view because it appears on a different window. — Zohar81, May 09 '21 at 08:24
Complementing this reply: Set the state on your parent view that you already have another .alert set and pass that value to the child through a binding property. That way on the child view you can toggle the value of your binding and it will present the alert on the parent. — Marcela Ceneviva Auslenter, Jun 07 '21 at 22:39
Had this problem with a context menu on mac, had to move the alert on the same view as the context menu. However when i dismiss the alert it appears again, only on a second dismiss disappears. Guess this api is deprecated for a reason... — Cristi Băluță, Dec 02 '21 at 05:56

score 11 · Answer 2 · answered Apr 07 '22 at 15:38

11

I had the same problem but realized this is now a deprecated .alert modifier. When I moved to using the newer modifier, it worked fine. Example from Apple's documentation:

        .alert(title, isPresented: $didFail) {
            Button("OK") {
                // Handle acknowledgement.
            }
        } message: {
            Text("Please ensure your credentials are correct.")
        }

answered Apr 07 '22 at 15:38

tdl

297
3
11

'alert(_:isPresented:actions:message:)' is only available in iOS 15.0 or newer – Newsonic May 02 '23 at 15:49

score 8 · Answer 3 · answered May 24 '22 at 23:52

Thanks to @ken-chin-purcell, his answer helps me to find more convenient workaround.

Just put alert under EmptyView:

    .overlay(
        EmptyView()
            .alert(isPresented: $showAlert1) {
                Alert(
                    title: ...,
                    message: ...,
                    ...
                )
            },
        alignment: .bottomTrailing
    )
    .overlay(
        EmptyView()
            .alert(isPresented: $showAlert2) {
                Alert(
                    title: ...,
                    message: ...,
                    ...
                )
            },
        alignment: .bottomTrailing
    )

Or use extension:

extension View {
    public func alertPatched(isPresented: Binding<Bool>, content: () -> Alert) -> some View {
        self.overlay(
            EmptyView().alert(isPresented: isPresented, content: content),
            alignment: .bottomTrailing
        )
    }
}

This is awesome! However, why the need for the .bottomTrailing alignment? — Eric Romrell, Aug 14 '23 at 20:15

score 0 · Answer 4 · answered Apr 06 '23 at 15:16

Along with changing the Alert initializer to a non-deprecated one according to this answer, I also had to use Text("") instead of attaching the alert to an EmptyView.

Text("")
    .alert(title, isPresented: $isAlertPresented) {
        Button("OK") {
            print("Button pressed")
        } 
    }

Issue with SwiftUI displaying Alert – Will not display alert box

4 Answers4