MDCTextField Hide/Show Password

[Fernandez-Aldo]

Override trailing view/ (button inside textfield) A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I'm trying to accomplish this functionality. I'm able to show the password but unable to hide it again. It seems there is a preloaded button inside the texfield that need to be overriden. Can you help me please?

---

Internal data

• Associated internal bug: b/147730399

[material-automation[bot]]

The title doesn't have a [Component] prefix.

[Fernandez-Aldo]

Hello. Following up this post to see if you have a fix for it

[andrewoverton]

You're trying to make it so that tapping the rightView toggles secureTextEntry on the textfield, right? If that's right, then I think all you need to do is create a button, set it as the rightView, then wire it up to call a method that toggles the secureTextEntry on the textfield, right?

[Fernandez-Aldo]

That's exactly what I'm doing. It works to unhide the password but then, when I try to click it again there is no button at all. I've debugged it and the button disappears. I think the MDCTexfield has already set that button to hide when clicked it.

[andrewoverton]

In https://github.com/material-components/material-components-ios/issues/9381 you mentioned you're working with MDCOutlinedTextField, but the picture in the description for this issue looks like an MDCTextField with an MDCTextInputControllerOutlined. Are you using both types of textfields (one for that issue and one for this issue) or are you just using one?

If the issue you're describing here pertains to the MDCTextField like the image in the description suggests I would recommend trying the new MDCOutlinedTextField. If the issue is with MDCOutlinedTextField I can look into that.

[Fernandez-Aldo]

I´m using an MDCTextField with an MDCTextInputControllerOutlined. I don´t know the difference of both sorry. How can I make use of the MDCOutlinedTexfield?

[andrewoverton]

No worries, one is totally new. If you're interested in trying the new one, MDCOutlinedTextFIeld, which I would recommend over the old one, you can find instructions here: https://github.com/material-components/material-components-ios/tree/develop/components/TextControls. I would check if the issue exists in the new one.

[brosahay]

Just a help for other looking for a similar implementation with MDCOutlinedTexfield, tested on iOS 12.4+, other implementations had problems with iOS 12.4.

Replace the imageOpenEye, imageCloseEye with your images, I use a wrapper on top of SVGKit in my application as of now.

    let imageOpenEye = svgForImageName("PasswordOpen", withColor: UIColor.black)
    let imageCloseEye = svgForImageName("EyeCloseIconSelected", withColor: UIColor.black)
    
    let passwordButton = UIButton(type: .custom)
    passwordButton.frame = CGRect(x: CGFloat(0), y: CGFloat(0),
                                  width: CGFloat(45), height: CGFloat(passwordTextField.frame.height))
    passwordButton.setImage(imageOpenEye, for: .normal)
    passwordButton.setImage(imageCloseEye, for: .selected)
    passwordButton.addTarget(self, action: #selector(passViewTap), for: .touchUpInside)
    
    passwordTextField.trailingView = passwordButton
    passwordTextField.trailingViewMode = .always
    passwordTextField.isSecureTextEntry = true
    passwordTextField.leadingUnderlineLabel.lineBreakMode = .byWordWrapping

    @objc func passViewTap(sender: UIButton) {
      sender.isSelected = !sender.isSelected
      txtCurrentPassword.isSecureTextEntry = !sender.isSelected
    }