fix: warning about invalid username and email on user interaction

[bhattabhi013]

What

fix: warning about invalid username and email on user interaction

Screenshot

alertOnUnfocus.mp4

Fixes bug(s)

• Warn (inline) about invalid email immediately after unfocusing the Email field #1407 and Warn (inline) about invalid username immediately after unfocusing the username field #1408

Part of

• 🎯 What can I work on ? #525
  (please be as granular as possible)

[M123-dev]

Looks good, but for the email fields, I don't start with my @gmail.com, so I always get a error at the start of my typing. It would be good if you could make onUserInteraction the standard way but allow to pass a different setting for the email field. Probably something like onUnFocus if this exists

[bhattabhi013]

Hi,
I was thinking to use Focus widget on SmoothTextFormField widget , what do you suggest?
Focus( onFocusChange: (bool hasFocus) { if (!hasFocus) { widget.validator; } }, child: TextFormField()

[M123-dev]

Could work, but I fear that this could lead to problems together with focus nodes (#1288)

Therfore I think it would be better to use them instead
cf: https://stackoverflow.com/a/54907267/13313941

[bhattabhi013]

Hi @M123-dev ,
I tried adding a focus listener to the _SmoothTextFormFieldState widget as suggested but it's not working as per the requirement since we are using a single widget for all the input fields(username, email, password, etc.).
The listener continuously toggles between true and false.

Please let me know if you need any further explanation.

[M123-dev]

Yeah @bhattabhi013, I don't know if I understood you correctly but you probably have to create the focus node inside the sign_up_page.dart and not the widget itself in order for it to work.

[bhattabhi013]

Hi @M123-dev ,
I tried multiple approaches to resolve this issue but unfortunately, as of now, I'm unable to do so.

1. First approach: Created focus node in sign_up_page.dart and added focus node as an attribute in the SmoothTextFormField widget and added a listener to it and I was able to call widget.validator method but error messages were not shown.

2. Used the focus widget and its onFocusChange method but as you suggested this approach messes up the focus of all the existing nodes.

I also have a doubt. Do we have to disable AutovalidateMode on the e-mail text field?

I'll be glad if you can guide me to the right approach to fix this.

[M123-dev]

Thanks for your efford @bhattabhi013 if there is no good and obvious way to solve this currently lets just leave it like this for now and we can always improve later 👍🏼