CODEWITHSUNDEEP
iosipadswiftuiios13actionsheet
CodeBender
CodeBender

Reputation: 36610

Unable to present ActionSheet via a NavigationBarItem in SwiftUI on an iPad

First, I have looked at a similar question, but it does not address my use case.

Present ActionSheet in SwiftUI on iPad

My issue is that I have a NavigationBarItem in my NavigationView that will toggle an ActionSheet when pressed. This behavior works properly when used on an iPhone.

However, when I use this on an iPad, both buttons on my screen will gray out and nothing happens. Clicking the buttons again will make them active (blue), but again, no sheet is presented.

Finally, if I select the button in the middle of the screen (Show Button), then an ActionSheet is properly presented on an iPad.

I have tested with Xcode 11 & iOS 13.5 and Xcode 12 & iOS 14. There is no change in behavior.

import SwiftUI

struct ContentView: View {
    @State private var isButtonSheetPresented = false
    @State private var isNavButtonSheetPresented = false

    var body: some View {
        NavigationView {
            Button(action: {
                // Works on iPad & iPhone
                self.isButtonSheetPresented.toggle()
              }) {
                Text("Show Button")
            }
            .actionSheet(isPresented: $isButtonSheetPresented,
                         content: {
                             ActionSheet(title: Text("ActionSheet"))
              })
            .navigationBarTitle(Text("Title"),
                                displayMode: .inline)
            .navigationBarItems(trailing:
                Button(action: {
                    // Works on iPhone, fails on iPad
                    self.isNavButtonSheetPresented.toggle()
                    }) {
                    Text("Show Nav")
                }
                .actionSheet(isPresented: $isNavButtonSheetPresented,
                             content: {
                                 ActionSheet(title: Text("ActionSheet"))
                    })
            )
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

Finally, this is how it appears on an iPad when clicking on "Show Nav":

enter image description here

This is a simplified setup for the screen where this issue occurs. I will need to retain the navigation settings shown, but have included them for clarity.

*** UPDATED ***

While it is not possible for the real app behind this, I did remove the .navigationViewStyle(StackNavigationViewStyle()) setting, which did make an ActionSheet appear, although in the wrong spot as seen below.

enter image description here

This also results in bizarre placement for the Button one accessed via "Show Button".

enter image description here

Upvotes: 1

Views: 1444

Answers (2)

Fercho_27
Fercho_27

Reputation: 31

This is an old question but if someone is interested in a turnaround that works on iOS 14:

I have two navigation bar trailing buttons inside .toolbar() and they should open action sheets. I placed an invisible "bar" at the top of the view to use it as an anchor:

var body: some View {
  VStack {
    HStack {
      Spacer()
      Color.clear.frame(width: 1, height: 1, alignment: .center)
        .actionSheet(/*ActionSheet for first button*/)
      Spacer().frame(width: 40)
      Color.clear.frame(width: 1, height: 1, alignment: .center)
        .actionSheet(/*ActionSheet for second button*/)
      Spacer().frame(width: 40)
    }.frame(height: 1)
  }
}

Cons:

  • There's a tiny bar/extra space at the top, noticeable especially during scrolling (Maybe putting the Stack in the background with a Stack could remove it?).
  • You might need to adjust the Spacers' width to try and align the ActionSheets to their respective button.
  • You can't force the action sheet arrows to always point upwards, I tested this on another simulator and the rightmost ActionSheet had its arrow pointing to the right (the 'illusion' that it came from the button was still there)

Here's how it looks

Upvotes: 1

Asperi
Asperi

Reputation: 257693

Yes, it is a bug, but probably different - that Apple does not allow to change anchor and direction of shown ActionSheet, because it is shown, but always to the right of originated control on iPad. To prove this it is enough to change location of button in Navigation

Here is example of placing at .leading position. Tested with Xcode 12 / iOS 14

demo

.navigationBarItems(leading:       
    Button(action: {
        // Works on iPhone, fails on iPad
        self.isNavButtonSheetPresented.toggle()
        }) {
        Text("Show Nav")
    }
    .actionSheet(isPresented: $isNavButtonSheetPresented,
                 content: {
                     ActionSheet(title: Text("ActionSheet"))
        })
)

Note: SwiftUI 2.0 .toolbar behaves in the same way, ie. has same bug.

Upvotes: 1

Related Questions