[DropdownMenu] providing a focusNode, the text cursor is lost after disabling the widget and enabling it again

Steps to reproduce

Run the code sample
Make sure the dropdown field is editable
Press the "Disable" button and then the "Enable" one
Try to edit the field again

Expected results

The mouse cursor should be of the tipe 'text' and the widget's field should be editable like it was in the initial state.

Actual results

The mouse cursor is of the tipe 'click' and the widget's field is not editable anymore.

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const DropdownMenuExample());
}

enum ColorLabel {
  blue('Blue', Colors.blue),
  pink('Pink', Colors.pink),
  green('Green', Colors.green),
  yellow('Orange', Colors.orange),
  grey('Grey', Colors.grey);

  const ColorLabel(this.label, this.color);

  final String label;
  final Color color;
}

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

  @override
  State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}

class _DropdownMenuExampleState extends State<DropdownMenuExample> {
  final TextEditingController colorController = TextEditingController();
  final FocusNode focusNode = FocusNode();
  ColorLabel? selectedColor;
  bool isEnabled = true;

  @override
  void dispose() {
    colorController.dispose();
    focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.green,
      ),
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    DropdownMenu<ColorLabel>(
                      enabled: isEnabled,
                      initialSelection: ColorLabel.green,
                      controller: colorController,
                      focusNode: focusNode,
                      label: const Text('Color'),
                      onSelected: (ColorLabel? color) {
                        setState(() {
                          selectedColor = color;
                        });
                      },
                      dropdownMenuEntries: ColorLabel.values
                          .map<DropdownMenuEntry<ColorLabel>>(
                              (ColorLabel color) {
                        return DropdownMenuEntry<ColorLabel>(
                          value: color,
                          label: color.label,
                          style: MenuItemButton.styleFrom(
                            foregroundColor: color.color,
                          ),
                        );
                      }).toList(),
                    ),
                    const SizedBox(width: 24),
                    FilledButton(
                      onPressed: () {
                        setState(() {
                          isEnabled = !isEnabled;
                        });
                      },
                      child: Text(
                        !isEnabled ? 'Enable' : 'Disable',
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Screen.Recording.2024-07-29.at.11.06.43.mov

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.22.3, on macOS 13.5 22G74 darwin-arm64, locale en-US)                                                                                                           ✔  17s  
    • Flutter version 3.22.3 on channel stable at /Users/parsodyl/.puro/envs/stable/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b0850beeb2 (12 days ago), 2024-07-16 21:43:41 -0700
    • Engine revision 235db911ba
    • Dart version 3.4.4
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/parsodyl/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/parsodyl/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

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

[✓] Android Studio (version 2022.3)
    • Android Studio at /Users/parsodyl/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 17.0.6+0-17.0.6b829.9-10027231)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.2)
    • IntelliJ at /Users/parsodyl/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 76.3.4
    • Dart plugin version 232.9559.10

[✓] Connected device (4 available)
    • iPhone SE (3rd generation) (mobile) • CB910630-CE1E-4F4D-9A2D-C6A6B502A7CB • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)                     • macos                                • darwin-arm64   • macOS 13.5 22G74 darwin-arm64
    • Mac Designed for iPad (desktop)     • mac-designed-for-ipad                • darwin         • macOS 13.5 22G74 darwin-arm64
    • Chrome (web)                        • chrome                               • web-javascript • Google Chrome 126.0.6478.185

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

• No issues found!

Reproducible using the code sample provided above.

It works as expected if the focusNode is not set for the DropdownMenu.

flutter doctor -v

[!] Flutter (Channel stable, 3.22.3, on macOS 14.5 23F79 darwin-arm64, locale en-GB)
    • Flutter version 3.22.3 on channel stable at /Users/nexus/dev/sdks/flutter
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b0850beeb2 (12 days ago), 2024-07-16 21:43:41 -0700
    • Engine revision 235db911ba
    • Dart version 3.4.4
    • DevTools version 2.34.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Flutter (Channel master, 3.24.0-1.0.pre.324, on macOS 14.5 23F79 darwin-arm64, locale en-GB)
    • Flutter version 3.24.0-1.0.pre.324 on channel master at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9d5ede0f5a (8 hours ago), 2024-07-29 01:28:40 -0400
    • Engine revision 2cf3986cae
    • Dart version 3.6.0 (build 3.6.0-88.0.dev)
    • DevTools version 2.37.1

It seems the focusNode.canRequestFocus is set to false by something when the widget is disabled.
Possible workaround by manually setting it to true when re-enable the widget.

FilledButton(
  onPressed: () {
    setState(() {
      isEnabled = !isEnabled;
      if (isEnabled) {
        focusNode.canRequestFocus = true;
      }
    });
  },
  child: Text(
    !isEnabled ? 'Enable' : 'Disable',
  ),
),

@PurplePolyhedron

@PurplePolyhedron thanks for the workaround.

It seems that the TextField (on every widget update) basically does this:
focusNode.canRequestFocus = canRequestFocus && enabled.
But following the code in the DropdownMenu, we have that TextField.canRequestFocus already depends on focusNode.canRequestFocus.

Keeping the default value (true) for TextField.canRequestFocus when a focusNode is provided might resolve the issue.

[material_ui] Fix DropdownMenu losing text cursor when re-enabled (fl…

Navigation Menu

Repository navigation

[DropdownMenu] providing a `focusNode`, the text cursor is lost after disabling the widget and enabling it again #152478

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[DropdownMenu] providing a focusNode, the text cursor is lost after disabling the widget and enabling it again #152478

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

danagbemava-nc commented on Jul 29, 2024

PurplePolyhedron commented on Jul 29, 2024

d-paradiso-pvotal commented on Jul 30, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[DropdownMenu] providing a `focusNode`, the text cursor is lost after disabling the widget and enabling it again #152478