SwiftUI: How to edit FocusRing shape or disable it?

Question

How to edit FocusRing shape

Or how to disable it?

import SwiftUI

struct FilterFieldView : View{
    @State var filterStr: String = ""

    var body : some View{
        ZStack{
            TextField("Filter", text: $filterStr)
                .textFieldStyle(PlainTextFieldStyle())
                .padding(.vertical, 2)
                .multilineTextAlignment(.center)
                .background(Color.clear)
                .padding(.trailing, 20)
                // needed to set border color 
                // + set field border beyond the "x" button
                .addBorder(color: Color.gray, radius: 10, lineWidth: 1)

            HStack() {
                Spacer()
                Button("X"){ self.filterStr = "" }
                    .buttonStyle(PlainButtonStyle()) //remove default button style
                    .padding(3)
                    .background(
                        Circle()
                        .stroke(Color.gray, lineWidth: 1)
                    )
                    .padding(.horizontal, 3)



            }
        }
    }
}

and addBorder extension (NOT NECESSARY CODE):

extension View {
    func addBorder(color: Color, radius: Int, lineWidth: Int) -> some View
    {
         self.modifier( CustomBorder(color: color, radius: CGFloat(radius), lineWidth: CGFloat(lineWidth) ) )
    }
}


struct CustomBorder: ViewModifier {
    @State var color: Color
    @State var radius: CGFloat
    @State var lineWidth: CGFloat

    func body (content: Content) -> some View
    {
        content
            .overlay(
                RoundedRectangle(cornerRadius: radius)
                    .stroke(color, lineWidth: lineWidth)
            )

    }
}

The following post might be helpful [Blue Highlighting / Focus Ring on Catalyst App](https://stackoverflow.com/questions/57577345/blue-highlighting-focus-ring-on-catalyst-app) — Asperi, Nov 25 '19 at 19:39
`RoundedBorderTextFieldStyle` instead of `PlainTextFieldStyle` might give you the look you are after without going into setting your own border. Have you checked `focusable` modifier - it might be the way to disable the focus ring? — LuLuGaGa, Nov 25 '19 at 20:16
@MatejUkmar posted my solution. Not sure if this way is will be ok for you, but... better than nosing. PS: I believe that there is exist way to edit focus ring shape. — Andrew_STOP_RU_WAR_IN_UA, Dec 28 '19 at 04:25

score 3 · Answer 1 · answered Dec 28 '19 at 04:24

Code of custom field without FocusRing on focus.

Better than nothing :)

struct NoFocusTextField: NSViewRepresentable {
    @Binding var text: String

    init(text: Binding<String>) {
        _text = text
    }

    func makeNSView(context: Context) -> NSTextField {
        let textField = NSTextField(string: text)
        textField.delegate = context.coordinator
        textField.isBordered = false
        textField.backgroundColor = nil
        textField.focusRingType = .none
        return textField
    }

    func updateNSView(_ nsView: NSTextField, context: Context) {
        nsView.stringValue = text
    }

    func makeCoordinator() -> Coordinator {
        Coordinator { self.text = $0 }
    }

    final class Coordinator: NSObject, NSTextFieldDelegate {
        var setter: (String) -> Void

        init(_ setter: @escaping (String) -> Void) {
            self.setter = setter
        }

        func controlTextDidChange(_ obj: Notification) {
            if let textField = obj.object as? NSTextField {
                setter(textField.stringValue)
            }
        }
    }
}

I agree, it is sad to see a billion dollar company not being able to do basic stuff with SwiftUI :) — Matej Ukmar, Dec 29 '19 at 12:56
@MatejUkmar it's OK for the first release... I hope this will be fixed on next release. :) — Andrew_STOP_RU_WAR_IN_UA, Dec 30 '19 at 13:49

Andrew_STOP_RU_WAR_IN_UA · Accepted Answer · 2021-05-25T00:06:21.803

the following code disables focusRing for all of textFields inside of file where it is located in

//Disable focusRing inside the FILE
fileprivate extension NSTextField {
    override var focusRingType: NSFocusRingType {
            get { .none }
            set { }
    }
}

OR

//Disable focusRing inside PROJECT
public extension NSTextField {
    override var focusRingType: NSFocusRingType {
            get { .none }
            set { }
    }
}

SwiftUI: How to edit FocusRing shape or disable it?

2 Answers2