Best way to handle `isSecureTextEntry`

[moyoteg]

I created this ViewModifier but when initially shown the text is not presented as isSecureTextEntry == true even though isSecure is true. Any idea why?! thanks! 😄

struct SecureToggle: ViewModifier {

        @State public var isSecure: Bool = true
        
        public func body(content: Content) -> some View {
            
            HStack {
                content
                    .introspectTextField { (textfield) in
                        textfield.isSecureTextEntry = isSecure
                    }
                
                Spacer()
                
                Button(action: {
                    self.isSecure.toggle()
                }) {
                    Image(systemName: isSecure ? "eye.slash":"eye")
                        .foregroundColor(Color.Nikola.lightBlue)
                }
                .padding()
            }
        }
        
    }

[SplittyDev]

It seems that SwiftUI is doing something weird behind the scenes.

I don't really have a fix for you here, but as a workaround I suggest using a binding inside of SecureToggle and rendering a SecureField instead of a normal TextField when isSecure is true.

Here's some example code on how the desired behavior might be achieved:

struct SecureToggle: ViewModifier {
    @Binding var isSecure: Bool
    public func body(content: Content) -> some View {
        HStack {
            content
            Spacer()
            Button(action: { self.isSecure.toggle() }) {
                Image(systemName: isSecure ? "eye.slash" : "eye")
                    .foregroundColor(Color.blue)
            }.padding()
        }
    }
}

struct ExampleView: View {
    @State private var textContent: String = ""
    @State private var isSecure: Bool = false
    
    var body: some View {
        VStack {
            Group {
                if isSecure {
                    SecureField("", text: $textContent)
                } else {
                    TextField("", text: $textContent)
                }
            }
            .modifier(SecureToggle(isSecure: $isSecure))
            .border(Color.black, width: 1)
        }.padding(20)
    }
}

[JannThomas]

Hi @moyoteg, I have also taken a look at this issue and it seems like SwiftUI changes the underlying UITextField values over and over again. That said @SplittyDev's solution is the way to go here anyway. Whenever possible, standard SwiftUI code is better than using Introspect.