SwiftUI popover not respecting arrow direction

When I try to change the arrow direction for SwiftUI popover it's not working at all, but in UIKit it seems to be ok

Please check the sample code

Button {
                showPopover.toggle()
            } label: {
                Text("Show Popover")
                    .padding(60)
                    .border(Color.yellow)
            }
            .popover(
                isPresented: $showPopover,
                arrowEdge: .bottom // issue here
            ) {
                Text("Popover conent")
            }
Answered by DTS Engineer in 790845022

@kumar.pavan You could try using the attachmentAnchor parameter in the popover(isPresented:attachmentAnchor:arrowEdge:content:) method to change the positioning anchor that defines the attachment point of the popover.

@kumar.pavan You could try using the attachmentAnchor parameter in the popover(isPresented:attachmentAnchor:arrowEdge:content:) method to change the positioning anchor that defines the attachment point of the popover.

@DTS Engineer I think attachmentAnchor is not helping it just changes the position of the anchor on source view, I have attached weird behaviors between iOS17.5 & iOS18.0.

But in UIKit we can pass multiple arrow directions like [UIPopoverArrowDirection.up, .down] then based on the availability of the space system chooses the right arrow anchor but in SwiftUI it clips the content, please sample code below

struct Home: View {
    @State private var showPopover: Bool = false
    @State private var arrowDirection: ArrowDirection = .up
    @State private var background: Color = .clear
    
    @ViewBuilder
    private var popoverContent: some View {
        VStack {
            Text("1240")
            Text("124A")
            Text("124A")
            Text("124A")
            Text("124A")
            Text("124A")
            Text("124A")
            Text("124A")
            Text("124Z")
        }
    }
    
    var body: some View {
        VStack(alignment: .center, spacing: 12) {
            Text("Arrow Direction")
                .font(.caption)
                .foregroundColor(.gray)
            Picker("", selection: $arrowDirection) {
                ForEach(ArrowDirection.allCases, id: \.rawValue) { direction in
                    Text(direction.rawValue)
                        .tag(direction)
                }
            }
            .pickerStyle(.segmented)
            
            Text("Background")
                .font(.caption)
                .foregroundColor(.gray)
            Picker("", selection: $background) {
                Text("Default")
                    .tag(Color.clear)
                Text("Blue")
                    .tag(Color.blue)
                Text("Red")
                    .tag(Color.red)
                Text("Orange")
                    .tag(Color.orange)
            }
            .pickerStyle(.segmented)
            
            Spacer()

//            Button {
//                showPopover.toggle()
//            } label: {
//                Text("Show Popover")
//                    .padding(60)
//                    .border(Color.yellow)
//            }
//            .popover(
//                isPresented: $showPopover,
//                arrowEdge: arrowDirection.edge
//            ) {
//                popoverContent
//            }
            
            HStack {
                Spacer()
                
                Button {
                    showPopover.toggle()
                } label: {
                    Image(systemName: "globe")
                        .font(.body)
                }
                .popover(
                    isPresented: $showPopover,
                    arrowEdge: arrowDirection.edge // change here
                ) {
                    popoverContent
                }
            }
            
            //Spacer()
        }
        .frame(maxHeight: .infinity, alignment: .top)
        .padding(15)
    }
}
SwiftUI popover not respecting arrow direction
 
 
Q