1

I found similar problems on SO about the focus engine with SwiftUI on tvOS. I think I managed to solve the focusable issue by wrapping the two Buttons here inside HStack with focusable.

                        HStack(spacing: 40) {
                            Spacer()

                            CustomButton(
                                title: Strings.Onboarding.Continue.title,
                                action: {
                                    handler(selectedProducts.map(\.id))
                                },
                                fixedWidth: ProductView.defaultItemSize.width
                            )
                            .disabled(selectedProducts.count < 3)

                            if selectedProducts.count < 3 {
                                CustomButton(
                                    title: Strings.Onboarding.Skip.title,
                                    action: {
                                        handler([])
                                    },
                                    fixedWidth: ProductView.defaultItemSize.width
                                )
                            }

                            Spacer()
                        }
                        .focusable()

enter image description here

But now the Buttons do not respond to the actions. This is so confusing. Has anyone solved a similar problem before?

Seto
  • 1,234
  • 1
  • 17
  • 33
  • The buttons themselves need to be marked focusable for their click actions to work. Why did you wrap them in HStacks? – Adam Sep 06 '21 at 17:18
  • So that the focusable area stretch across the width of the screen. The initial problem was If I follow focus from say the left edge of the screen, the focus engine will not go to the buttons below. If you know what I mean. – Seto Sep 06 '21 at 18:03
  • Ah okay, I understand. I am away from a computer, but what I’d try is moving the HStack *inside* the button. If you’re using PlainButtonStyle, you could create a button that was very wide but it mostly looked empty, with a RoundedRectangle and Text only on one side. The whole thing would be focusable and clickable. Does that make sense? – Adam Sep 07 '21 at 01:46
  • I don't think I understand what you mean. But I'll try adding 'fake' buttons on the left and right side and remove the focusable from the `HStack`. Btw, it seems like I should use [focusSection()](https://developer.apple.com/documentation/swiftui/text/focussection()) instead, but it's still in the beta version. [WWDC video](https://developer.apple.com/videos/play/wwdc2021/10023/) at 9:50. – Seto Sep 07 '21 at 09:52
  • I can't get it to work. It seems if you put .focusable() on a Button, it breaks the button-click. If you put .focusable() *inside* the button, it does nothing. Two suggestions: One, use the betas so you can use .focusSection() — the final release of tvOS 15 is coming this month, probably. Or two, widen your buttons so they extend under the leftmost and rightmost column — if you do that, moving focus "down" from those columns should focus the button. – Adam Sep 07 '21 at 16:45
  • How sure are you that the `.focusSection()` will not have the same problem with the `.focusable()`? I'm trying to implement this [package](https://github.com/setoelkahfi/SwiftUIFocusGuide), but it seems like the layout that I'm working with right now isn't a simple `HStacks` inside `VStack`. Will keep you updated. – Seto Sep 09 '21 at 09:56

0 Answers0