DropdownButtonFormField immediately reset when clicking on if if a Textfield has the focus

[escamoteur]

Please see here:

Steps to Reproduce

Run this App:

import 'package:flutter/material.dart';

class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text('Settings'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: DefaultTextStyle.merge(
          style: TextStyle(fontSize: 24),
          child: Form(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text(
                  'Server'.toUpperCase(),
                  style: TextStyle(color: Colors.blue, fontSize: 32),
                ),
                SizedBox(height: 16),
                Row(
                  children: [
                    Text('Url: '),
                    SizedBox(width: 8),
                    Expanded(
                      child: TextField(
                        style: TextStyle(fontSize: 28),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 24),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text('Port:'),
                    SizedBox(width: 8),
                    SizedBox(
                      width: 100,
                      child: TextField(
                        style: TextStyle(fontSize: 28),
                      ),
                    ),
                    Spacer(),
                    Center(
                      child: MaterialButton(
                        color: Theme.of(context).primaryColor,
                        onPressed: () {},
                        child: Text(
                          'Test Connection',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    )
                  ],
                ),
                SizedBox(height: 48),
                Text(
                  'Map'.toUpperCase(),
                  style: TextStyle(color: Colors.blue, fontSize: 32),
                ),
                SizedBox(height: 16),
                DropdownButtonFormField(
                  iconSize: 50,
                  style: TextStyle(color: Colors.black, fontSize: 24),
                  onChanged: (s) {},
                  hint: Text('Select a Map'),
                  items: [
                    DropdownMenuItem(value: '1', child: Text('Map 1')),
                    DropdownMenuItem(value: '2', child: Text('Map 2')),
                    DropdownMenuItem(value: '3', child: Text('Map 3')),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Click in one of the Text fields and try to open the DopDownButton

Target Platform: Android
Target OS version/browser: API 28
Devices: Emulator

Logs

[√] Flutter (Channel master, v1.10.15-pre.95, on Microsoft Windows [Version 10.0.18362.418], locale de-DE)
    • Flutter version 1.10.15-pre.95 at C:\Entwicklung\flutter
    • Framework revision 9423a01204 (9 hours ago), 2019-10-13 18:41:22 -0700
    • Engine revision eed171ff35
    • Dart version 2.6.0 (build 2.6.0-dev.7.0 965b8cb1d8)

 
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\escam\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)        
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 39.0.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] IntelliJ IDEA Community Edition (version 2018.2)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2018.2.5
    • Flutter plugin version 29.1.3
    • Dart plugin version 182.4892.25

[√] VS Code, 64-bit edition (version 1.38.1)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.5.1

[√] Connected device (3 available)
    • Android SDK built for x86 64 • emulator-5554   • android-x64    • Android 9 (API 28) (emulator)
    • Chrome                       • chrome          • web-javascript • Google Chrome 77.0.3865.90
    • Headless Server              • headless-server • web-javascript • Flutter Tools

[escamoteur]

Probably related to #40333

[escamoteur]

OK. together with the help of @slightfoot we found the source of the problem is that DropdownButtonFormField is not able to gain Focus, which let's the focus return to the last Widget that had Focus.

By adding a manual Focus we could solve it like this:

                Focus(
                  focusNode: _node,
                  onFocusChange: (bool focus) {
                    setState((){});
                  },
                  child: Listener(
                    onPointerDown: (_) {
                      FocusScope.of(context).requestFocus(_node);
                    },
                    child: DropdownButtonFormField(
                      iconSize: 50,
                      style: TextStyle(color: _node.hasFocus ? Colors.white : Colors.white70, fontSize: 24),
                      onChanged: (s) {},
                      hint: Text('Select a Map', 
                        style: TextStyle(color: _node.hasFocus ? Colors.white : Colors.white70),
                      ),
                      items: [
                        DropdownMenuItem(value: '1', child: Text('Map 1')),
                        DropdownMenuItem(value: '2', child: Text('Map 2')),
                        DropdownMenuItem(value: '3', child: Text('Map 3')),
                      ],
                    ),
                  ),
                )

This should be fixed by adding a FocusNode to DropdownButton because it's far from obvious that the above is needed.

[escamoteur]

I also tried it with the current stable, where it kind of worked but had other strange effects

[HansMuller]

CC @gspencergoog

[gspencergoog]

This might be fixed with #42482. This issue looks strikingly similar to #41881

[escamoteur]

Yes seems to be the same effect although I think Simon analysis that the problem is the missing focusnode of DropDownButtons is the correct one. Because adding a focus fixed it.

[gspencergoog]

I think it also needs a focus node, which might help with accessibility focus as well, since dropdown buttons aren't often focused implicitly by TalkBack.

I'll look at adding one, regardless of whether #42482 fixes it.

[gspencergoog]

I tested this with the above PR, and it fixes the problem.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.