tvOS 17 padding or frame breaks highlight of Button inside List

Question

Created Nov ’23

Replies 3

Boosts 0

Participants 2

Hello, found a issue with tvOS 17. When I use either a frame or padding, the button highlight has no round corners anymore, seems like the left and right margin of buttons is not displayed. Works perfectly fine on tvOS 16.

Is this a bug? Any way to fix this?

struct ListOfButtons: View {
    var values = (0...13).map{"item \($0)"}
    @State var selectedValue: String = "item 0"
    
    var body: some View {
        List(values, id: \.self) { item in
            Button {
                selectedValue = item
            } label: {
                Text(item)
            }
        }
        .frame(width: 200, height: 900)
        .padding(40)
        .background(Color.cyan)
    }
}

tvOS 16.4: Screenshot 2023-11-05 003916.png

tvOS 17: Screenshot 2023-11-05 004019.png

Answered by TobTimm in 771327022

I find a way to modify this. scrollClipDisabled(_:) was added in tvOS 17. Set this to true to tell your scroll views to not clip content.

struct ListOfButtons: View {
    var values = (0...13).map{"item \($0)"}
    @State var selectedValue: String = "item 0"
    
    var body: some View {
        List(values, id: \.self) { item in
            Button {
                selectedValue = item
            } label: {
                Text(item)
            }
        }
        .scrollClipDisabled(true)
        .frame(width: 200, height: 900)
        .padding(40)
        .background(Color.cyan)
    }
}

https://developer.apple.com/documentation/swiftui/view/scrollclipdisabled(_:)

Boost

Answer 1

TobTimm OP

Nov ’23

I have the same problem. Have you find any fixes for this? The only thing I found that's helping is setting the leading/trailing insets with listRowInsets:

.listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))

0

Answer 2

TobTimm OP

Nov ’23

Accepted Answer

I find a way to modify this. scrollClipDisabled(_:) was added in tvOS 17. Set this to true to tell your scroll views to not clip content.

struct ListOfButtons: View {
    var values = (0...13).map{"item \($0)"}
    @State var selectedValue: String = "item 0"
    
    var body: some View {
        List(values, id: \.self) { item in
            Button {
                selectedValue = item
            } label: {
                Text(item)
            }
        }
        .scrollClipDisabled(true)
        .frame(width: 200, height: 900)
        .padding(40)
        .background(Color.cyan)
    }
}

https://developer.apple.com/documentation/swiftui/view/scrollclipdisabled(_:)

3

Answer 3

webhelp OP

Nov ’23

Thank you very much. Your solution fixes the issue. Is this a bug or apple has the history of introducing breaking changes often?

0