Material: Problem of calling becomeFirstResponder()

[jeantimex]

Hi folks,

When I call becomeFirstResponder() in viewDidLoad, the label of the textfield disappears, see the screenshot below:

when I type in the keyboard, the label shows up:

Is this a known issue? And how to make sure the label shows when the textfield becomes first responder? Thanks!

[danieldahan]

Hey :)

I tested this using the latest Material and TextField sample, where all worked out well. What version of Material are you using and what is your setup?

[danieldahan]

I made a change which I think will help. I was able to reproduce your issue somewhat, and with the change I made it fixed it. I will be putting this for release now and you can let me know how it works out.

[danieldahan]

Try Material 2.4.5 :) All the best.

[jeantimex]

Thank you so much @danieldahan for your prompt reply! I just tried 2.4.5 on iOS 10.2, Xcode 8.2.1 and I can still see the issue.

[danieldahan]

Can you share your setup, because it should work. As well, I updated the TextField again with Material 2.4.6.

[jeantimex]

Thanks @danieldahan! I tried v2.4.6, and I can still reproduce the problem, but here is my workaround in Swift 3, that is call the becomeFirstResponder in viewDidLayoutSubviews.

override func viewDidLayoutSubviews() {
  super.viewDidLayoutSubviews()
  _ = self.emailField.becomeFirstResponder()
}

I guess this might just be related to my application though, my first view controller has a full-screen size video playing in the background, when user taps on the "Login" button, the navigation controller pushes the email view controller to the view stack which has the Material component.

I've tried the following:

In viewDidLoad, after the email text field is setup completely, dispatch becomeFirstResponder call to the main thread queue like so:

DispatchQueue.main.async {
  _ = self.emailField.becomeFirstResponder()
}

This works great, but somehow the animation looks jerky, so I changed to the 2nd solution, delay the dispatch like so (still in viewDidLoad):

let when = DispatchTime.now() + 0.3 // delay 300ms
  DispatchQueue.main.asyncAfter(deadline: when) {
  _ = self.emailField.becomeFirstResponder()
}

This time, it works fine when the view controller is pushed in, but when I navigate back and come back to this view again, the keyboard animation looks jerky again, so I have to call resignFirstResponder in viewWillDisappear.

Doing so will make the keyboard have the slide-in animation and I don't like it, so eventually I decide to simply call becomeFirstResponder in viewDidLayoutSubviews.

I don't think it's a problem with Material UI component, I guess since the keyboard and the text field need to show the animation in the same thread and thus conflict.

I love this component, thanks again for your help!!!

[jeantimex]

Actually, the following code will produce a smoother animation with keyboard:

override func viewDidAppear(_ animated: Bool) {
  super.viewWillAppear(animated)
  DispatchQueue.main.async {
    _ = self.emailField.becomeFirstResponder()
  }
}

override func viewWillDisappear(_ animated: Bool) {
  super.viewWillDisappear(animated)
   _ = self.emailField.resignFirstResponder()
}

Works with multiple view controllers in navigation controller.

Cheers!

[danieldahan]

@jeantimex This is great insight. I will keep playing with the TextField and see if I can improve its setup. It is a pretty tricky component, as it has so many setup cases, and requires many moving parts simultaneously. I really appreciate your help and feedback :) Thank you!