0

I'm have a login view with 2 text fields, username and password.

I am trying to create a functionality where I have a button to show / hide the password in the password field.

I set this up as follows:

ZStack(alignment: .trailing) {
    Group {
        if viewModel.isPasswordVisible {
            SecureField("", text: $viewModel.text)
                .keyboardType(.default)
                .focused($focusField, equals: .secure)
        }
        else {
            TextField("", text: $viewModel.text)
                .keyboardType(.emailAddress)
                .focused($focusField, equals: .plain)
        }
    }
    .autocorrectionDisabled()
    .textInputAutocapitalization(.none)
    .font(.system(size: Constants.Font.regularSize))
    .padding()
    .padding(.trailing, textFieldPaddingTrailing + numberOfSymbolsInTextField)
    
    HStack {
        if viewModel.isSecureField {
            Button(action: {
                viewModel.isPasswordVisible.toggle()
            }) {
                Text(Image(systemName: viewModel.isPasswordVisible ? Constants.Image.eye : Constants.Image.eyeSlash))
                    .font(.system(size: Constants.Font.symbolSize))
                    .foregroundColor(DMSColor.SwiftUIColor.primaryText)
            }
        }
    }
    .padding(.trailing)
}

Logic wise, things work as expected with the password field showing or hiding as the button is tapped, see below

TextField SwiftUI First responder resign SecureTextField

The issue I have is that the keyboard also gets hidden as a result of my implementation.

I believe it is because when I toggle the isPasswordVisible, the view gets redrawn to show a regular text field and this isn't focused.

How can I implement this show / hide mechanism while also maintaining the current first responder. This means the keyboard and focus of the textfield should remain the same after the show / hide button was tapped.

Shawn Frank
  • 4,381
  • 2
  • 19
  • 29
  • 1
    Does this answer your question? [Show/Hide Password - How can I add this feature?](https://stackoverflow.com/questions/63095851/show-hide-password-how-can-i-add-this-feature) – Sweeper Aug 05 '23 at 05:54
  • @Sweeper - thanks for showing this. I did try a couple of solutions from here, I still don't seem to be able to keep the keyboard up. I tried the last / most recent solution listed there. It gives a better result than what I have now but not the most desirable. It dismisses the keyboard and brings it up again. Do you see any solution from there which works for you ? In that case maybe I'm implementing something wrong. – Shawn Frank Aug 05 '23 at 06:12
  • In your code you have .focused(..) modifiers, but you don‘t try to set focus. – soundflix Aug 05 '23 at 19:00
  • @soundflix Yes, that is a good point, however, have a look at my comment. I tried the fix of setting the focus that was mentioned in the answer specified by Sweeper. The issue there is that while this improves the experience, the keyboard gets dismissed for a second and then it reappears as the focus gets set again. I am trying to keep the keyboard up all throughout. – Shawn Frank Aug 06 '23 at 03:46

0 Answers0