UI Issue when changing custom UIButton state

Question

I have 2 UITextField and a custom UIButton . I check if there's value in both UITextField and then enable the button. If the user go back and deletes the value in either of them, the button state goes back to disabled . My problem is with the UI. When enabled - the button should be white with purple color for title and when disabled it should have a clear color (as a background color) and a light gray for title and border color. This is the method for that UIButton :

func authButton() {
    layer.cornerRadius = 5
    layer.borderWidth = 1
    clipsToBounds = true
    if state ==  .normal {
        layer.borderColor = UIColor.white.cgColor
        backgroundColor = UIColor.white
        setTitleColor(Colors.purpleDarker, for: .normal)
    }
    else if state == .disabled {
        layer.borderColor = UIColor.lightText.cgColor
        backgroundColor = UIColor.gray
        setTitleColor(.lightText, for: .disabled)
    }
}

Works fine until the user deletes the content from a text field then the background stays white and the title sort of "disappear" (or its not visible). It only works if the user taps "Done" button on the keyword and then changes the state to disabled.

Here's how I'm checking for those changes in the UITextField (delegates are set for both text fields):

func handleTextFields() {
    emailTextField.addTarget(self, action: #selector(textFieldDidChange), for: .editingChanged)
    passwordTextField.addTarget(self, action: #selector(textFieldDidChange), for: .editingChanged)
}

@objc func textFieldDidChange() {
    print("11111")
    guard let email = emailTextField.text, !email.isEmpty,
          let pass = passwordTextField.text, !pass.isEmpty
    else {
        loginButton.isEnabled = false
        return
    }
    loginButton.isEnabled = true
}

func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    switch textField {
    case emailTextField:
        passwordTextField.becomeFirstResponder()
    case passwordTextField:
        passwordTextField.resignFirstResponder()
    default:
        break
    }
    return true
}

What am I doing wrong?

Answer 1

Based on your comments...

Move:

loginButton.authButton()

from viewWillLayoutSubviews() to viewDidLoad() , then change your textFieldDidChange() func to:

@objc func textFieldDidChange() {
    print("11111")
    guard let email = emailTextField.text, !email.isEmpty,
          let pass = passwordTextField.text, !pass.isEmpty
    else {
        loginButton.isEnabled = false
        // update your customized "state"
        loginButton.authButton()
        return
    }
    loginButton.isEnabled = true
    // update your customized "state"
    loginButton.authButton()
}

Answer 2

Try this maybe it will help, without calling authButton() in viewWillLayoutSubviews

extension UIButton {
    open override func draw(_ rect: CGRect) {
        authButton()
    }
    func authButton() {
        layer.cornerRadius = 5
        layer.borderWidth = 1
        clipsToBounds = true
        if state ==  .normal {
            layer.borderColor = UIColor.white.cgColor
            backgroundColor = UIColor.white
            setTitleColor(.red, for: .normal)
        }
        else if state == .disabled {
            layer.borderColor = UIColor.lightText.cgColor
            backgroundColor = UIColor.yellow
            setTitleColor(.yellow, for: .disabled)
        }
    }
}