Skip to content

Fix menu width issue for DropdownMenu #123823

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Mar 31, 2023
Merged

Fix menu width issue for DropdownMenu #123823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/flutter/lib/src/material/dropdown_menu.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import 'menu_anchor.dart';
import 'menu_style.dart';
import 'text_field.dart';
import 'theme.dart';
import 'theme_data.dart';


// Navigation shortcuts to move the selected menu items up or down.
Expand Down Expand Up @@ -535,10 +536,10 @@ class _DropdownMenuState<T> extends State<DropdownMenu<T>> {
);

return _DropdownMenuBody(
key: _anchorKey,
width: widget.width,
children: <Widget>[
TextField(
key: _anchorKey,
mouseCursor: effectiveMouseCursor,
canRequestFocus: canRequestFocus(),
enableInteractiveSelection: canRequestFocus(),
Expand Down Expand Up @@ -607,7 +608,6 @@ class _ArrowDownIntent extends Intent {

class _DropdownMenuBody extends MultiChildRenderObjectWidget {
const _DropdownMenuBody({
super.key,
super.children,
this.width,
});
Expand Down Expand Up @@ -826,6 +826,7 @@ class _DropdownMenuDefaultsM3 extends DropdownMenuThemeData {
return const MenuStyle(
minimumSize: MaterialStatePropertyAll<Size>(Size(_kMinimumWidth, 0.0)),
maximumSize: MaterialStatePropertyAll<Size>(Size.infinite),
visualDensity: VisualDensity.standard,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@QuncCccccc this seems partially a bit unrelated to the issue. It will make the menu unresponsive the general theme VisualDensity changes. Unless the used TextField in the DropdownMenu already is that as well already. Then it makes sense to make sure sizes always line up. Are all the other menus also locked and not changing with VisualDensity? If so (I will check) it makes even more sense. If we can avoid inconsistencies that is always nice. I have heard feedback from Flutter devs that were raging about inconsistencies in VisualDenisity behavior in general in Flutter, but that is another topic.

Nice find with the key, would have taken me a while to figure that out. Thanks for the quick fix.

);
}

Expand Down
52 changes: 52 additions & 0 deletions packages/flutter/test/material/dropdown_menu_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1058,6 +1058,58 @@ void main() {
await gesture.moveTo(tester.getCenter(textFieldFinder));
expect(RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1), SystemMouseCursors.click);
});

testWidgets('The menu has the same width as the input field in ListView', (WidgetTester tester) async {
// Regression test for https://github.com/flutter/flutter/issues/123631
await tester.pumpWidget(MaterialApp(
home: Scaffold(
body: ListView(
children: <Widget>[
DropdownMenu<TestMenu>(
dropdownMenuEntries: menuChildren,
),
],
),
),
));

final Rect textInput = tester.getRect(find.byType(TextField));

await tester.tap(find.byType(TextField));
await tester.pumpAndSettle();

final Finder findMenu = find.byWidgetPredicate((Widget widget) {
return widget.runtimeType.toString() == '_MenuPanel';
});
final Rect menu = tester.getRect(findMenu);
expect(textInput.width, menu.width);

await tester.pumpWidget(Container());
await tester.pumpWidget(MaterialApp(
home: Scaffold(
body: ListView(
children: <Widget>[
DropdownMenu<TestMenu>(
width: 200,
dropdownMenuEntries: menuChildren,
),
],
),
),
));

final Rect textInput1 = tester.getRect(find.byType(TextField));

await tester.tap(find.byType(TextField));
await tester.pumpAndSettle();

final Finder findMenu1 = find.byWidgetPredicate((Widget widget) {
return widget.runtimeType.toString() == '_MenuPanel';
});
final Rect menu1 = tester.getRect(findMenu1);
expect(textInput1.width, 200);
expect(menu1.width, 200);
});
}

enum TestMenu {
Expand Down