ReactiveTextField looks strange using Flutter web

[tk512]

I am using ReactiveTextField in the way shown in the example project of reactive_forms and it renders perfectly on desktop browsers, but on mobile (using the project built using: flutter build web --web-renderer html) the textfields start looking funny once they are selected.

Field initially:
https://i.imgur.com/6gFXpNf.jpeg

When selected, it displays a strange border:
https://i.imgur.com/hYa5tPA.jpg

The code is as follows:

ReactiveTextField(
                  formControlName: 'emailAddress',
                  validationMessages: (control) => {
                    ValidationMessage.required: 'The email can not be empty',
                    ValidationMessage.email: 'The email value must be a valid email'
                  },
                  onSubmitted: () => form.focus('cellularPhoneNumber'),
                  textInputAction: TextInputAction.next,
                  decoration: InputDecoration(labelText: 'E-mail address'),
                ),

I have tested this on both iOS and Android using a variety of browsers, so I think the issue is either with reactive_forms or with Flutter web. Is there a workaround / fix for this?

[tk512]

Update: maybe related to this ? flutter/engine#23969

[joanpablo]

Hi @tk512,

Try to use a TextField o TextFormField instead of a ReactiveTextField. You may experiment the same results because ReactiveTextField is a wrapper to TextField the same as the TextFormField. It should be an issue with Flutter web. But please test with native text fields to check.

Thanks

[tk512]

Hi @joanpablo, thanks for your reply. It turns out that it was definitely an issue in Flutter, and it has already been fixed in Flutter master and soon to come in dev.

So for those experiencing it, change to the master or dev channel using the "flutter channel" command.