Skip to content

ReactiveDropdownMenu doesn't reset to unselected state when form.reset() is called #180

@Weny-murat

Description

@Weny-murat

When using ReactiveDropdownMenu with reactive_forms, calling form.reset() resets the form control value but doesn't visually reset the dropdown menu to its unselected state. The dropdown continues to show the previously selected value even though the underlying form control is properly reset.

Steps to Reproduce:

Create a form with a ReactiveDropdownMenu

Select a value from the dropdown

Click the reset button which calls form.reset()

Observe that the dropdown still shows the selected value, though the form control value is null

Expected Behavior:
The dropdown should visually reset to its unselected/placeholder state when form.reset() is called, just like other reactive form controls.

Actual Behavior:
The dropdown maintains its previous visual selection while the form control value is properly reset to null.

Minimal Code Example:


import 'package:flutter/material.dart';
import 'package:reactive_dropdown_menu/reactive_dropdown_menu.dart';
import 'package:reactive_forms/reactive_forms.dart';

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

final form = FormGroup({
  'name': FormControl<String>(value: 'John Doe'),
  'drop': FormControl<String>(),
});

final dropdownValues = ["Test Value 1", "Test Value 2"];

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: ReactiveForm(
              formGroup: form,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ReactiveTextField<String>(
                      formControlName: "name",
                      decoration: InputDecoration(
                        suffix: ReactiveFormConsumer(
                          builder: (context, form, child) {
                            return Text(form.control('drop').value ?? "");
                          },
                        ),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                  ),
                  ReactiveDropdownMenu(
                    formControlName: "drop",
                    dropdownMenuEntries:
                        dropdownValues
                            .map((v) => DropdownMenuEntry(value: v, label: v))
                            .toList(),
                  ),
                  FilledButton(onPressed: form.reset, child: Text("Reset")),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Additional Information:

Flutter Version: 3.29.2

reactive_dropdown_menu Version: 0.0.1

reactive_forms Version: 17.0.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions