CODEWITHSUNDEEP
swiftmacosswiftui
user12718888
user12718888

Reputation:

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:

Or

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)

Upvotes: 4

Views: 2139

Answers (2)

user7804781
user7804781

Reputation: 316

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

Upvotes: 3

Salman500
Salman500

Reputation: 1211

I don't know which blue border are you referring to, if you are referring to blue border for textfield, there is no blue border beacuse you have given a PlainTextFieldStyle

To deselect the textfield

UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.endEditing(true)

To have a rounded textfield with padding

ZStack {
    Rectangle()
    .foregroundColor(.clear)
    .overlay(RoundedRectangle(cornerRadius: 6).stroke(Color("appcolor").opacity(0.5), lineWidth: 1))

    TextField("Enter some text", text: $worldName)
        .padding([.leading, .trailing], 6)
}.frame(height: 42)
    .padding([.leading, .trailing], 10)

enter image description here

Upvotes: 0

Related Questions