0

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?

1 Answer 1

0

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.

1
  • I filed a bug report (FB14166579) with Apple's Feedback Assistant. No response, just immediately closed. So apparently, the large off-center focus ring is just ducky. Yeah, okay.
    – pfurbacher
    Commented Jul 12 at 3:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.