Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flutter 2.2.2 dropdown error when selecting #85768

Closed
erperejildo opened this issue Jul 2, 2021 · 6 comments
Closed

Flutter 2.2.2 dropdown error when selecting #85768

erperejildo opened this issue Jul 2, 2021 · 6 comments
Labels
c: regression It was better in the past than it is now f: material design flutter/packages/flutter/material repository. found in release: 2.2 Found to occur in 2.2 found in release: 2.4 Found to occur in 2.4 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on r: invalid Issue is closed as not valid
Projects

Comments

@erperejildo
Copy link

erperejildo commented Jul 2, 2021

Steps to Reproduce

  1. flutter create dropdown_issue
  2. Copy this main.dart:
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> rentPeriods = [
    'daily',
    'weekly',
    'bimonthly',
    'monthly',
    '2_months',
    'quarterly',
    'biannually',
    'annually',
  ];
  String? rentPeriod;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ListTile(
              title: DropdownButtonFormField<String>(
                value: rentPeriod,
                items: rentPeriods.map((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
                onChanged: (value) {
                  //   setState(() {
                  //     rentPeriod = value;
                  //   });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

It's the default one when we created a new project but without comments or extra widgets, just the dropdown.

This is happening in my project after updating yesterday to 2.2.2 and I was not performing any change to this page/component, it was already working before.
It also happens with a new project.

  1. Test what I tried here: https://youtu.be/OWKsEBb_7UA

Expected results:
The dropdown shouldn't update the value when we have something like this:

onChanged: (value) {
                  //   setState(() {
                  //     rentPeriod = value;
                  //   });
                },

This is working fine in this other example: https://api.flutter.dev/flutter/material/DropdownButton-class.html

Actual results:
The value is getting updated

Logs
no error messages
Analyzing dropdown_issue...                                             
No issues found! (ran in 2.1s)
[✓] Flutter (Channel stable, 2.2.2, on macOS 11.4 20F71 darwin-x64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] Connected device (2 available)

• No issues found!
@erperejildo
Copy link
Author

Updated to new released version today, 2.2.3, and faced same issue

@darshankawar darshankawar added the in triage Presently being triaged by the triage team label Jul 5, 2021
@darshankawar
Copy link
Member

@erperejildo
Running your code on latest stable (2.2.3), I see that the value is getting updated after selecting options from dropdown:

onChanged: (value) {
                  print(value);
                  //   setState(() {
                  //     rentPeriod = value;
                  //   });
                },


flutter: daily
flutter: monthly
flutter: biannually
flutter: annually

But I see the same behavior using the official example too (https://api.flutter.dev/flutter/material/DropdownButton-class.html), as below:

onChanged: (String? newValue) {
        print(newValue);
      //  setState(() {
      //    dropdownValue = newValue!;
      //  });
      },


flutter: Two
flutter: Four
flutter: One
flutter: Free         
flutter doctor -v
[✓] Flutter (Channel stable, 2.2.3, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.2.3 at /Users/dhs/documents/fluttersdk/flutter
    • Framework revision f4abaa0735 (4 days ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

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

[✓] VS Code (version 1.57.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                               •
      web-javascript • Google Chrome 91.0.4472.114

• No issues found!





Can you provide more details as when exactly do you see the value getting updated ?
Thanks.

@darshankawar darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jul 5, 2021
@erperejildo
Copy link
Author

@erperejildo
Running your code on latest stable (2.2.3), I see that the value is getting updated after selecting options from dropdown:

onChanged: (value) {
                  print(value);
                  //   setState(() {
                  //     rentPeriod = value;
                  //   });
                },


flutter: daily
flutter: monthly
flutter: biannually
flutter: annually

But I see the same behavior using the official example too (https://api.flutter.dev/flutter/material/DropdownButton-class.html), as below:

onChanged: (String? newValue) {
        print(newValue);
      //  setState(() {
      //    dropdownValue = newValue!;
      //  });
      },


flutter: Two
flutter: Four
flutter: One
flutter: Free         

flutter doctor -v
Can you provide more details as when exactly do you see the value getting updated ?
Thanks.

If you see same behaviour using the official example that's the error I was facing. It shouldn't update the value

@no-response no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jul 16, 2021
@maheshmnj
Copy link
Member

maheshmnj commented Jul 20, 2021

Hi @erperejildo,
I was able to reproduce the issue. The DropDownButtonFormField is updating the state without calling setState. While the DropDownButton works fine as intended, The issue is reproducible on v2.0.0 too, So most probably it must have been broken on the versions prior to v2.0.0.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primaryColor: Colors.blue),
      darkTheme: ThemeData.dark(),
      home: DropDownIssue(
        title: 'DropdownForm Issue',
      ),
    );
  }
}

class DropDownIssue extends StatefulWidget {
  DropDownIssue({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _DropDownIssueState createState() => _DropDownIssueState();
}

class _DropDownIssueState extends State<DropDownIssue> {
  List<String> rentPeriods = [
    'daily',
    'weekly',
    'bimonthly',
    'monthly',
    '2_months',
    'quarterly',
    'biannually',
    'annually',
  ];
  String? rentPeriod;
  String? dropDownValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('DropDownButtonFormField updates state without setState'),
          DropdownButtonFormField<String>(
            value: rentPeriod,
            items: rentPeriods.map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            hint: Text(rentPeriod ?? 'daily'),
            onChanged: (value) {
            /// The state updates even without calling setState
              //   setState(() {
              //     rentPeriod = value;
              //   });
            },
          ),
          SizedBox(
            height: 20,
          ),
          Text('DropDownButton works as intended'), 
          DropdownButton<String>(
            value: dropDownValue ?? 'One',
            icon: const Icon(Icons.arrow_downward),
            iconSize: 24,
            elevation: 16,
            style: const TextStyle(color: Colors.deepPurple),
            underline: Container(
              height: 2,
              color: Colors.deepPurpleAccent,
            ),
            onChanged: (String? newValue) {
            /// commenting this wouldn't update the state of the dropdown
              setState(() {
                dropDownValue = newValue;
              });
            },
            items: <String>['One', 'Two', 'Free', 'Four']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          )
        ],
      ),
    );
  }
}

Here's a dartapad demo of this issue.

flutter doctor -v
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-arm, locale en-GB)
    • Flutter version 2.2.3 at /Users/mahesh/Documents/flutter
    • Framework revision f4abaa0735 (3 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.2)
    • 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 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.1.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.58.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • 6A434744-B348-4FB3-AB10-131292174456 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS
      11.4 20F71 darwin-arm
    • Chrome (web)               • chrome                               • web-javascript • Google
      Chrome 91.0.4472.164

• No issues found!
[✓] Flutter (Channel master, 2.4.0-5.0.pre.87, on macOS 11.4 20F71 darwin-arm, locale en-GB)
    • Flutter version 2.4.0-5.0.pre.87 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e084e9d946 (2 days ago), 2021-07-17 12:00:21 -0700
    • Engine revision 14a9e9a50e
    • Dart version 2.14.0 (build 2.14.0-321.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.2)
    • 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 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.1.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.58.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • 6A434744-B348-4FB3-AB10-131292174456 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-4
      (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 11.4 20F71 darwin-arm
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 91.0.4472.114

• No issues found!

Thank you for your contribution.

@maheshmnj maheshmnj added f: material design flutter/packages/flutter/material repository. found in release: 2.2 Found to occur in 2.2 found in release: 2.4 Found to occur in 2.4 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on c: regression It was better in the past than it is now and removed in triage Presently being triaged by the triage team labels Jul 20, 2021
@TahaTesser TahaTesser added this to To do in Nevercode via automation Nov 25, 2021
@TahaTesser TahaTesser moved this from To do to In progress in Nevercode Nov 25, 2021
@TahaTesser TahaTesser self-assigned this Nov 25, 2021
@TahaTesser
Copy link
Member

TahaTesser commented Nov 26, 2021

This is working as intended, this was introduced in #37145

The current implementation of DropdownButtonFormField does not pass the initial value to _DropdownButtonFormFieldState. As a result changes made through the child DropdownButton are not made to the FormFieldState and the widget is not updated unless a onChanged function is provided to the DropdownButtomFormField constructor.

This pull request modifies DropdownButtonFormField to behave more consistently with other FormField widgets in how the Form state is handled.

Looks like DropdownButtonFormField should be updated without onChanged forcing it to update, DropdownButton behavior is not expected to be the same for FormField

Nevercode automation moved this from In progress to Done (PR merged) Nov 26, 2021
@TahaTesser TahaTesser added the r: invalid Issue is closed as not valid label Nov 26, 2021
@TahaTesser TahaTesser removed this from Done (PR merged) in Nevercode Nov 26, 2021
@TahaTesser TahaTesser removed their assignment Nov 26, 2021
@TahaTesser TahaTesser added this to To do in Nevercode via automation Dec 6, 2021
@TahaTesser TahaTesser moved this from To do to Issue closed with comment in Nevercode Dec 6, 2021
@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 10, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
c: regression It was better in the past than it is now f: material design flutter/packages/flutter/material repository. found in release: 2.2 Found to occur in 2.2 found in release: 2.4 Found to occur in 2.4 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on r: invalid Issue is closed as not valid
Projects
Status: Issue closed with comment
Nevercode
  
Issue closed with comment
Development

No branches or pull requests

4 participants