Ornament buttons broken by hoverEffect clipShape

Question

Created Mar ’25

Replies 1

Boosts 0

Participants 1

TLDR: Applying a clipShape in a hoverEffect closure is preventing taps from getting through to buttons nested within an ornament.

I need to make a custom ornament menu, similar to the stock ornament available via TabView but with some visual tweaks. It displays icons, and then expands to display a label as the user hovers. Example:

Simulator-Screenshot---Apple-Vision-Pro---2024-02-08-at-15.17.36.png

Simulator-Screenshot---Apple-Vision-Pro---2024-02-08-at-15.17.39.png

I've put together a piece of sample code, following guidance from WWDC docs:

         VStack {
        }
        .ornament(attachmentAnchor: .scene(.leading)) {
            VStack {
                ForEach(0...7, id:\.self) { index in
                    Button(action: {
                        print(index) // <---- This will not print
                    }) {
                        HStack {
                            Text("\(index)")
                            Text(" button")
                        }
                    }
                }
            }
            .padding(12)
            .glassBackgroundEffect()
            .hoverEffect { effect, isActive, proxy in
              effect
                    .clipShape(RoundedRectangle(cornerRadius: 36)
                    .size(width: isActive ? proxy.size.width : 72, height: proxy.size.height, anchor: .leading)
                )
            }
        }
    }

The buttons in this code cannot be interacted with, as the print statement never executes. What am I missing here? I've managed to get some weird behavior, sometimes a specific clipShape (like a circle) will allow a tap on a single button, but not others.

Boost

Answer 1

zachcosta OP

Mar ’25

I believe I found a fix - though not sure why it is necessary. Any insight would be appreciated. Adding a hover effect on the button, in addition to the overall hover effect, fixes the bug.

         VStack {
            Text(displayText).font(.largeTitle)
        }
        .ornament(attachmentAnchor: .scene(.leading)) {
            VStack {
                ForEach(0..<7) { index in
                    Button(action: {
                        print(index) // <---- This will not print
                    }) {
                        HStack {
                            Text("\(index)")
                            Text(" button")
                        }
                    }.hoverEffect { effect, isActive, proxy in
                        effect
                           .clipShape(RoundedRectangle(cornerRadius: 36)
                          )
                      }
                }
            }
            .padding(12)
            .background(.blue.opacity(0.6))
            .glassBackgroundEffect(in: RoundedRectangle(cornerRadius: 36))
            .hoverEffect { effect, isActive, proxy in
              effect
                    .clipShape(RoundedRectangle(cornerRadius: 36)
                    .size(width: isActive ? proxy.size.width : 72, height: proxy.size.height, anchor: .leading)
                )
            }
        }
    }

0

	VStack {
	}
	.ornament(attachmentAnchor: .scene(.leading)) {
	VStack {
	ForEach(0...7, id:\.self) { index in
	Button(action: {
	print(index) // <---- This will not print
	}) {
	HStack {
	Text("\(index)")
	Text(" button")
	}
	}
	}
	}
	.padding(12)
	.glassBackgroundEffect()
	.hoverEffect { effect, isActive, proxy in
	effect
	.clipShape(RoundedRectangle(cornerRadius: 36)
	.size(width: isActive ? proxy.size.width : 72, height: proxy.size.height, anchor: .leading)
	)
	}
	}
	}

	VStack {
	Text(displayText).font(.largeTitle)
	}
	.ornament(attachmentAnchor: .scene(.leading)) {
	VStack {
	ForEach(0..<7) { index in
	Button(action: {
	print(index) // <---- This will not print
	}) {
	HStack {
	Text("\(index)")
	Text(" button")
	}
	}.hoverEffect { effect, isActive, proxy in
	effect
	.clipShape(RoundedRectangle(cornerRadius: 36)
	)
	}
	}
	}
	.padding(12)
	.background(.blue.opacity(0.6))
	.glassBackgroundEffect(in: RoundedRectangle(cornerRadius: 36))
	.hoverEffect { effect, isActive, proxy in
	effect
	.clipShape(RoundedRectangle(cornerRadius: 36)
	.size(width: isActive ? proxy.size.width : 72, height: proxy.size.height, anchor: .leading)
	)
	}
	}
	}