SwiftUI: Overlay is on the whole VStack instead of the textfield after wrapping TextFields with VStack

Question

Here's the simplified code:

var body: some View {
    
    Section(header: Text("Personal Data").position(x:45, y: 17)) {
        Form {
            VStack {
                TextField("Title", text: self.$title)
                    .disabled(true)
                    .overlay(
                        Button("", action: {
                            self.showTitles = true
                            
                        }))
                    .popover(isPresented: self.$showTitles, attachmentAnchor: .point(.bottom)) { EmptyView() }
                
                Divider()
                TextField("Name", text: $firstName)
                Divider()
                TextField("Last Name", text: $lastName)
            }
            .padding()
            .padding(.bottom, -7)
            .overlay(
                RoundedRectangle(cornerRadius: 6.0)
                    .stroke(Color.secondary, lineWidth: 1.0)
                    .opacity(0.3)
            )
        }

    }
}

It was working as I wanted before adding the VStack although I need it to be able to place Dividers. I've tried to wrap the single TextField with a VStack and also used Group to see if I can only have button overlay on the the first TextField but nothing seems to work. Do I have to use GeometryReader for this purpose?

I'd appreciate it if anyone can provide some insights.

score 0 · Accepted Answer · answered Oct 28 '20 at 10:52

This is a little bit tricky:

Understanding the issue:

SwiftUI automatically detects the action of the default button and uses it as the cell action. So the popover will come as the popover of the entire list too (somehow )

Solution

So you need to change the buttonStyle to something else than default

TextField("Title", text: self.$title)
    .disabled(true)
    .overlay(
        Button(action: ( { showTitles.toggle() } ),
               label: ( { Text("").frame(maxWidth: .infinity, maxHeight: .infinity) } )
        ).buttonStyle(BorderlessButtonStyle())
    )
    .popover(isPresented: self.$showTitles, attachmentAnchor: .point(.bottom)) { EmptyView() }

_{Note that how I scale the button to fill the entire space}

SwiftUI: Overlay is on the whole VStack instead of the textfield after wrapping TextFields with VStack

1 Answers1

Understanding the issue:

Solution