macosswiftuifocus

SwiftUI Checkbox focus ring too large and off-center--is this bug?

This code demonstrates the problem: the checkbox's focus ring is too large and off-center on macOS 14.5. (I haven't checked other macOS versions. Also note, this is not an iOS question.)

import SwiftUI

@main
struct CheckboxFocusRingBugApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .windowResizability(.contentSize)
    }
}

struct ContentView: View {
    @State var text1: String = ""
    @State var isOn1: Bool = true

    let promptText: String = "" 

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack(alignment: .top) {
                TextField(promptText, text: $text1)
                    .frame(width: 100)
                Toggle("", isOn: $isOn1)
                    .toggleStyle(.checkbox)
            }
        }
        .padding(16)
    }
}

#Preview {
    ContentView()
}

Checkbox focus ring problem

Is there a view modifier which will correct this, or is this just a glaring bug?

Solution

  • This fixes the issue but quite unexpectedly:

    Toggle("", isOn: $isOn1)
    .toggleStyle(.checkbox)
    .focusEffectDisabled() // <-- draws the focus ring correctly?!

    Checkbox focus ring issue solveThe

    After posting my question, I began to browse unrelated SwiftUI focus questions. The first one was this: SwiftUI: Remove 'Focus Ring' Highlight Border from macOS TextField

    I wondered what the effect would be, expecting it to remove the focus ring entirely. Not so. It actually fixes the problem ... until of course Apple corrects what I assume is a focus ring drawing bug.