Flutter Web: TextFormField shows another suffixIcon on Microsoft Edge

Issue

I was testing my login form on Microsoft Edge[Edge(web-javascript] and there was another interactable visibility button that was never added on my TextFormField. When I open it on Chrome, it doesn’t appear.

From what I’ve tested, it only appears if obscureText == true and if there is any value on the form field.

This raises me another question: Is this just a debug problem? Since Flutter Web is a PWA, shouldn’t it behave the same way on any browser?

Gif recorded on Microsoft Edge.

My code:

bool isObscured = true;

InputDecoration loginFormFieldDecoration = InputDecoration(
  constraints: const BoxConstraints(maxWidth: 400, maxHeight: 70),
  hintStyle: hintTextLoginFormFieldStyle,
  border: OutlineInputBorder(
      borderSide: BorderSide(color: cinzaEscuro, width: 1.0), borderRadius: BorderRadius.circular(12)),
  focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: cinzaEscuro, width: 1.0), borderRadius: BorderRadius.circular(12)),
  errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red[400]!, width: 1.0), borderRadius: BorderRadius.circular(12)),
  focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red[400]!, width: 1.0), borderRadius: BorderRadius.circular(12)),
);

TextFormField(
  controller: senha,
  validator: (value) {
    if (value!.isEmpty) {
      return "Insira uma senha";
    }
  },
  cursorColor: azul,
  style: formFieldValueStyle,
  keyboardType: TextInputType.visiblePassword,
  obscureText: isObscured,
  decoration: loginFormFieldDecoration.copyWith(
      prefixIcon: Icon(
        Icons.lock,
        color: cinzaEscuro,
      ),
      suffixIcon: IconButton(
          splashRadius: 0.1,
          onPressed: () {
            setState(() {
              isObscured = !isObscured;
            });
          },
          icon: Icon(
            isObscured ? Icons.visibility_off : Icons.visibility,
            color: isObscured ? cinzaEscuro : azul,
          )),
      hintText: "Digite a sua senha"),
)

Versions:

Flutter 2.4.0-1.0.pre.82 • channel master • https://github.com/flutter/flutter.git
Framework • revision 5cda761161 (6 weeks ago) • 2021-07-05 21:46:01 -0400
Engine • revision 60ff03819c
Tools • Dart 2.14.0 (build 2.14.0-280.0.dev)
Microsoft Edge version 92.0.902.73 

Solution

After some research, I found an open issue on github about this problem. There is also a workaround.

See this issue.

Answered By – Alan Cesar

Answer Checked By – Marie Seifert (FlutterFixes Admin)