Skip to content

DropdownButtonFormField can't be focused/unfocused when replacing FocusNode #166642

@AhmedLSayed9

Description

@AhmedLSayed9

Steps to reproduce

Run the sample try focusing/unfocusing after replacing FocusNode similar to the video sample.

Expected results

  1. DropdownButtonFormField can be focused if it was unfocused and we replaced FocusNode.
  2. DropdownButtonFormField can be unfocused if it was focused and we replaced FocusNode.

Actual results

DropdownButtonFormField can't be focused/unfocused when replacing FocusNode.

Code sample

Code sample
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: DropdownFocusDemo(),
    );
  }
}

class DropdownFocusDemo extends StatefulWidget {
  const DropdownFocusDemo({super.key});

  @override
  State<DropdownFocusDemo> createState() => _DropdownFocusDemoState();
}

class _DropdownFocusDemoState extends State<DropdownFocusDemo> {
  FocusNode _focusNode = FocusNode();
  String _selectedValue = 'One';

  void _replaceFocusNode() {
    setState(() {
      _focusNode.dispose();
      _focusNode = FocusNode();
      print('FocusNode replaced');
    });
  }

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dropdown Focus Demo')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            DropdownButtonFormField<String>(
              focusNode: _focusNode,
              focusColor: Colors.yellow,
              decoration: InputDecoration(
                filled: true,
                contentPadding: EdgeInsets.symmetric(vertical: 100),
              ),
              value: _selectedValue,
              items: const [
                DropdownMenuItem(value: 'One', child: Text('One')),
                DropdownMenuItem(value: 'Two', child: Text('Two')),
              ],
              onChanged: (value) {
                setState(() {
                  _selectedValue = value!;
                });
              },
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                _focusNode.requestFocus();
              },
              child: const Text('Request Focus'),
            ),
            ElevatedButton(
              onPressed: _replaceFocusNode,
              child: const Text('Replace FocusNode'),
            ),
            ElevatedButton(
              onPressed: () {
                FocusManager.instance.primaryFocus?.unfocus();
              },
              child: const Text('Remove FocusNode'),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration
Screen.Recording.2025-04-05.at.7.54.42.AM.mov

Logs

No response

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.29.2, on macOS 15.3.2 24D81 darwin-arm64, locale en-EG) [1,169ms]
    • Flutter version 3.29.2 on channel stable at /Users/ahmedelsayed/.puro/envs/stable/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c236373904 (3 weeks ago), 2025-03-13 16:17:06 -0400
    • Engine revision 18b71d647a
    • Dart version 3.7.2
    • DevTools version 2.42.3

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1) [1,263ms]
    • Android SDK at /Users/ahmedelsayed/Library/Android/sdk
    • Platform android-35, build-tools 35.0.1
    • Java binary at: /Users/ahmedelsayed/Library/Java/JavaVirtualMachines/jbr-21.0.6/Contents/Home/bin/java
      This JDK is specified in your Flutter configuration.
      To change the current JDK, run: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment JBR-21.0.6+9-895.97-nomod (build 21.0.6+9-b895.97)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [825ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [13ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.3) [13ms]
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.5+-12932927-b750.29)

[✓] VS Code (version 1.98.2) [12ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.108.0

[✓] Connected device (5 available) [5.9s]

[✓] Network resources [774ms]
    • All expected network resources are available.

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.found in release: 3.29Found to occur in 3.29found in release: 3.31Found to occur in 3.31frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions