Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get rid of the blue selection border around SwiftUI TextFields?

I have created two textfields with the following code:


VStack (spacing: geometry.size.width/48) {
    TextField("World Name", text: self.$WorldName)
        .font(.system(size: geometry.size.width/28))
        .textFieldStyle(PlainTextFieldStyle())
        .frame(width: geometry.size.width*0.75)
        .background(
            RoundedRectangle(cornerRadius: 8)
                .fill(Color.init(white: 0.28))
    )
    TextField("World Seed", text: self.$WorldSeed)
        .font(.system(size: geometry.size.width/28))
        .textFieldStyle(PlainTextFieldStyle())
        .frame(width: geometry.size.width*0.75)
        .background(
            RoundedRectangle(cornerRadius: 8)
                .fill(Color.init(white: 0.28))
    )
    Button (action: {
        withAnimation {
            self.back.toggle()
        }
        // Is there a way to "deselect" any textfields here
    }){
        Text("Back")
    }
}

Why is it when I click on one, there is a blue border that does not fade out with the animation, and how can I remove it? This question is specific, and I have provided code, and necessary details, I don't see why it should be too hard to answer.

So in summarized terms, I need to know:

  • How to get rid of this blue selection border

Or

  • How to immediately deselect the text field within the button's action,
  • Get the border to properly line up with the TextField if I apply a padding or round corners.

The only blue in this picture is the border I am referring to The only blue in this picture is the border I am referring to

As shown in this screenshot, the textfield is round, but the selection border does not get round corners to reflect the rounded rectangle shape of the entry As shown in this screenshot, the textfield is round, but the selection border does not get round corners to reflect the rounded rectangle shape of the entry

The blue border does not fit the padding

The blue border does not fit the padding

I added a padding like this .padding([.leading, .trailing], 6)


1 Answers

You can remove the blue border (which appears on macos even when using PlainTextFieldStyle) by extending NSTextField like so:

extension NSTextField {
        open override var focusRingType: NSFocusRingType {
                get { .none }
                set { }
        }
}

See Apple Developer Forum answer here

like image 175
user7804781 Avatar answered Sep 23 '25 04:09

user7804781