CODEWITHSUNDEEP
swifttextfieldplaceholder
Mdoyle1
Mdoyle1

Reputation: 121

Placeholder not showing after textfield is cleared SwiftUI

I have 2 textfields... 

 TextField("Username", text: $viewModel.usernameStore){}
        .padding(.all, 8)
        .background(Color(red:0.5, green: 0.5, blue: 0.5, opacity: 0.3))
        .cornerRadius(4.0)
        .padding(.bottom, 5)


    SecureField("Password", text: $viewModel.passwordStore){}
        .padding(.all, 8)
        .background(Color(red:0.5, green: 0.5, blue: 0.5, opacity: 0.3))
        .cornerRadius(4.0)
        .padding(.bottom, 5)

And a function that clears them all...

    func clearCredentials(){
    $viewModel.usernameStore.wrappedValue = ""
    $viewModel.passwordStore.wrappedValue = ""
 }

When the function is called and the textfields are cleared password's placeholder repopulates but username's placeholder doesn't, it is only cleared.

I'm assuming this has something to do with the password being a secure field. How can I get username to repopulate the placeholder text after being cleared?

Upvotes: 0

Views: 2426

Answers (2)

user13128031
user13128031

Reputation:

SwiftUI’s TextField supports placeholder text just like UITextField did – gray text that is shown in the text field when it’s empty, either giving uses a prompt (“Enter your password”) or showing some example data.

To set a placeholder, pass it in as part of the initializer for your text field, like this:

struct ContentView: View {
    @State private var emailAddress = ""

    var body: some View {
        TextField("johnnyappleseed@apple.com", text: $emailAddress)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
    }
}

Upvotes: 0

Chris
Chris

Reputation: 8126

i think this is a SwiftUI Bug, because if you tap in the other field, the placeholder appears again...

I have another solution for you (it is the standard way Apple does it to clear textfields, so the user knows how to handle it...

check this out:

struct CustomTextField: UIViewRepresentable {

    class Coordinator: NSObject, UITextFieldDelegate {

        @Binding var text: String

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

        func textFieldDidChangeSelection(_ textField: UITextField) {
            text = textField.text ?? ""
        }
    }

    @State var secure : Bool
    @State var initialText : String
    @Binding var text: String
    @State var placeholder : String

    func makeUIView(context: UIViewRepresentableContext<CustomTextField>) -> UITextField {
        let textField = UITextField(frame: .zero)
        textField.placeholder = placeholder
        textField.delegate = context.coordinator
        textField.text = initialText
        textField.clearButtonMode = .always
        textField.isSecureTextEntry = secure
        return textField
    }

    func makeCoordinator() -> CustomTextField.Coordinator {
        return Coordinator(text: $text)
    }

    func updateUIView(_ uiView: UITextField, context: UIViewRepresentableContext<CustomTextField>) {
        uiView.text = text
        uiView.placeholder = placeholder
    }
}

struct ContentView: View {

    @State var username : String = ""
    @State var password : String = ""

    func clearCredentials(){
        username = ""
        password = ""

    }

    var body: some View {
        VStack {

            CustomTextField(secure: false, initialText: "", text: $username, placeholder: "Username")
                .fixedSize()
                .padding(.all, 8)
                .background(Color(red:0.5, green: 0.5, blue: 0.5, opacity: 0.3))
                .cornerRadius(4.0)
                .padding(.bottom, 5)


             CustomTextField(secure: true, initialText: "", text: $password , placeholder: "Password")
                .fixedSize()
                .padding(.all, 8)
                .background(Color(red:0.5, green: 0.5, blue: 0.5, opacity: 0.3))
                .cornerRadius(4.0)
                .padding(.bottom, 5)
            Button(action: {
                self.clearCredentials()
            }) {
                Text("Clear credentials")
            }

        }.padding()
    }
}

Upvotes: 2

Related Questions