Dimitri
Dimitri

Reputation: 321

iOS / Swift: Showing email addresses suggestions on keyboard for UITextFields

In one of our iOS / iPhone Apps we need to display the user's configured email addresses as suggestions during the registration process. There are several apps that display email addresses as fixed buttons within the input accessory view of the keyboard. The Yelp app for instance (iPhone 8 with iOS 13.4)

Yelp on iPhone 8 running iOS 13.4

I could not figure out how enable this functionality with built-in means. I tried to set textContentType, keyboardType and autocorrectionType to the correct values as described in other stack overflow articles I could find about this topic.

This is my code

    override func viewDidLoad() {
    super.viewDidLoad()

    let email = UITextField(frame: CGRect(x: 10, y: 60, width: 300, height: 40))
    email.placeholder = "Enter email address here"
    email.font = UIFont.systemFont(ofSize: 15)
    email.borderStyle = UITextField.BorderStyle.roundedRect
    email.clearButtonMode = UITextField.ViewMode.whileEditing
    email.contentVerticalAlignment = UIControl.ContentVerticalAlignment.center
    email.returnKeyType = .continue

    email.keyboardType = .emailAddress
    email.textContentType = .emailAddress
    email.autocorrectionType = .yes
    email.autocapitalizationType = .none

    view.addSubview(email)
}

And this is how it looks like on the same iPhone 8 with iOS 13.4 as I was running the Yelp App on:

Test App on the same iPhone 8 running iOS 13.4

No email address suggestions.

The curious thing is that the same App running on my iPad shows suggestions but in a different way:

Test App on iPad Pro running iOS 13.3

How can I display the user's email addresses in the same way as Yelp does it? Is there a special UITextField view I have to use or is there another way to get the email addresses and display them in a custom text accessory view?

Thanks for your help!

Upvotes: 6

Views: 6169

Answers (3)

Đỗ Long Thành
Đỗ Long Thành

Reputation: 509

I solved this problem giving UITextField with accessibilityLabel = "Registration" instead of rename view controller.

Upvotes: 4

user5354767
user5354767

Reputation: 76

I spent a few hours frustrated on this and I found an easy fix. You can show email suggestions by changing the name of the ViewController to have something such as Register in it or in my case I just went to the label field in the Identity Inspector and added the text "Register" because I didn't want to rename the ViewController. And then I added a second text field with Secure Text Entry enabled. That's all you need to do. All other options can be set to default. You can do this in a few minutes.

Apple wants you to be using a Registration form when using email suggestions so they check for that name in the ViewController and they want you to have a password with it so they check for that too. All other views default to no suggestions or Passwords App.

Upvotes: 1

Dimitri
Dimitri

Reputation: 321

After some research of other Apps that have the correct behavior I found a solution for the problem above.

Apple does a little bit of magic in the background, called "Heuristic" but Apple does not describe it.

Our problem was, that there was only a UITextField asking for an email address and there was no context.

This needs to be done:

  1. Give the View Controller a name that contains something like "Register"
  2. Have a UITextField with textContentType = .emailaddress in the View Controller
  3. Have a UITextField with textContentType = .password in the View Controller, that is not hidden and that is editable a the time of the creation of the register View Controller.

Our solution was to hide the password text field below the email text field. The password text field must be at least one point below the email text field to make it editable. We just put a view between email and password to hide it.

After editing or selecting the email address, we animated moved the password text field below the email text field.

This one started to melt my brain but at least we found a solution that worked for us.

Upvotes: 1

Related Questions