## Description
This PR adds `DropdownMenu.selectOnly`. This property allows users to
get the DropdownMenu behave as a 'select' component.
It is meant as a future replacement for
`DropdownMenu.requestFocusOnTap`.
## Motivation
On mobile, a dropdown menu widget is usually used as a ‘select’ widget
because opening the keyboard for searching/filtering is not convenient.
In Flutter, this is currently implemented through
`DropdownMenu.requestFocusOnTap` which defaults to false on mobile and
true on desktop.
The `DropdownMenu.requestFocusOnTap` property is currently used to set
`FocusNode.canRequestFocus`. This leads do difficulties mainly related
to focus traversal:
- Keyboard traversal requires workarounds (for instance relying on the
trailing icon to be focusable).
- Keyboard shortcuts require also a workaround (currently relying on a
Focus widget in a Stack).
- The `DropdownMenu` decoration does not reflect the focus state.
This PR proposes a new property named `DropdownMenu.selectOnly` which
does not require `DropdownMenu.requestFocusOnTap` to be false to make
the `DropdownMenu` behave like a select widget.
With this property the `DropdownMenu`:
- Supports keyboard navigation on mobile and desktop.
- Has a correct decoration when focused.
- Does not rely on the trailing icon to be focusable (see
https://github.com/flutter/flutter/issues/174096).
In the future this property could be used as a replacement for
`DropdownMenu.requestFocusOnTap`. For the moment, for compatibility, it
does not replace `DropdownMenu.requestFocusOnTap`.
## Related Issue
Fixes [Allow DropdownMenu to be non-editable and focusable (select
control) ](https://github.com/flutter/flutter/issues/178009)
Also related to [Make DropdownMenu's trailing icon not focusable by
default](https://github.com/flutter/flutter/issues/174096) and
[[Material3] DropdownMenu Keyboard
Accessibility](https://github.com/flutter/flutter/issues/123797).
## Tests
- Adds 9 tests.
Fixes https://github.com/flutter/flutter/issues/177009
### Description
- Moves `MenuButton` submit logic from `onEditingComplete` to
`onSubmitted` to allow `TextField` to handle the `textInputAction` logic
- Wraps each item into `ExcludeFocus` to enable proper
`TextInputAction.previous` handling. If we don't wrap each child in
`ExcludeFocus`, then focus will be moved to one of them, which is not
the expected behavior for `TextInputAction.previous`.
| BEFORE | AFTER |
| - | - |
| <video alt="before"
src="https://github.com/user-attachments/assets/a50d41de-7e54-409b-bf81-80dfb1db132f"
/> | <video alt="after"
src="https://github.com/user-attachments/assets/152e47e6-d774-481c-8478-af526b5f6749"
/> |
<details closed><summary>Code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() {
runApp(const DropdownMenuExample());
}
class DropdownMenuExample extends StatefulWidget {
const DropdownMenuExample({super.key});
@override
State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}
class _DropdownMenuExampleState extends State<DropdownMenuExample> {
final FocusNode _previousFocusNode = FocusNode(debugLabel: 'previous');
final FocusNode _textFieldFocusNode = FocusNode(debugLabel: 'textField');
final FocusNode _nextFocusNode = FocusNode(debugLabel: 'next');
@override
void dispose() {
_previousFocusNode.dispose();
_textFieldFocusNode.dispose();
_nextFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(colorSchemeSeed: Colors.green),
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
spacing: 20,
children: [
TextField(
focusNode: _previousFocusNode,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Previous TextField',
),
),
DropdownMenu<String>(
label: Text('Dropdown with filter cannot close keyboard'),
initialSelection: 'green',
focusNode: _textFieldFocusNode,
requestFocusOnTap: true,
showTrailingIcon: false,
textInputAction: TextInputAction.next,
onSelected: (String? color) {
print('SELECTED $color');
},
dropdownMenuEntries: [
DropdownMenuEntry(value: 'red', label: 'red'),
DropdownMenuEntry(value: 'green', label: 'green'),
DropdownMenuEntry(value: 'blue', label: 'blue'),
],
),
TextField(
focusNode: _nextFocusNode,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Next TextField',
),
),
],
),
),
),
);
}
}
```
</details>
There is still one behavior I would like to discuss. When the
`showTrailingIcon: true` and `textInputAction: TextInputAction.previous`
are used, the focus moves not to the previous field but to the
`IconButton`. If we wrap the `IconButton` with `ExcludeFocus`, then this
is fixed, but I am not sure whether this is the correct way to proceed.
| TextInputAction.previous and no ExcludeFocus on IconButton |
TextInputAction.previous and ExcludeFocus on IconButton |
| - | - |
| <video alt="before"
src="https://github.com/user-attachments/assets/76c90dcf-3ea1-492f-8e67-7e987b08c2ff"
/> | <video alt="after"
src="https://github.com/user-attachments/assets/2a1600a2-e308-430e-a12f-acdc06cbf81c"
/> |
## Pre-launch Checklist
- [X] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [X] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [X] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [X] I signed the [CLA].
- [X] I listed at least one issue that this PR fixes in the description
above.
- [ ] I updated/added relevant documentation (doc comments with `///`).
- [X] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [X] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [X] All existing and new tests are passing.
<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
## Description
This PR fixes escape key not closing the menu when
`DropdownMenu.requestFocusOnTap` is false.
## Related Issue
Fixes [DropdownMenu menu panel does not close when pressing ESC and
requestFocusOnTap is
false](https://github.com/flutter/flutter/issues/177993)
Part of https://github.com/flutter/flutter/issues/123797
## Tests
- Adds 3 tests.
- Updates 2 non-related tests where I spotted some nits.
## Description
This PR adds `DropdownMenu.decorationBuilder`.
The goal is to make `DropdownMenu` more flexible.
Before this PR, several fields are used by `DropdownMenu` to create an
inner `InputDecoration`. This approach has several limitations:
- `InputDecoration` has more fields that the ones that are exposed
- `DropdownMenu` makes some choices that can't be change. Especially, it
creates an IconButton (with hardcoded padding) which is passed to
`InputDecoration.suffixIcon`. This inner `IconButton` introduces some
difficulty related to focus management and UI customization.
The new `DropdownMenu.decorationBuilder` property offers users a way to
take control on the inner `InputDecoration` in a non-breaking way.
In a future PR, this property will help replacing the default
`IconButton`.
Currently users can replace the `IconButton` using this code sample:
<details><summary>DropdownMenu without IconButton</summary>
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({super.key});
final List<DropdownMenuEntry<String>> menuEntries = [
"Red",
"Green",
"Blue",
].map((t) => DropdownMenuEntry<String>(label: t, value: t)).toList();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SizedBox(
width: 220,
child: DropdownMenu<String>(
expandedInsets: EdgeInsets.zero,
requestFocusOnTap: true,
dropdownMenuEntries: menuEntries,
decorationBuilder: (context, controller) {
return InputDecoration(
labelText: 'Label text',
helperText: 'Select a color or enter one',
suffixIcon: controller.isOpen
? const Icon(Icons.arrow_drop_up)
: const Icon(Icons.arrow_drop_down),
);
},
),
),
),
),
);
}
}
```
</details>
## Related Issue
Fixes [DropDownMenu secondary trailing
widget](https://github.com/flutter/flutter/issues/175847)
Will help for [Make DropdownMenu's trailing icon not focusable by
default](https://github.com/flutter/flutter/issues/174096)
## Related discussions
https://github.com/flutter/flutter/issues/175847#issuecomment-3330098375https://github.com/flutter/flutter/pull/175558#discussion_r2380227394
## Tests
- Adds 7 tests.
Fixes https://github.com/flutter/flutter/issues/175950.
This PR is to make screen reader announce the text field content and the
trailing button together on `DropdownMenu`. When the `DropdownMenu`
cannot be focused (`canRequestFocus()` is set to false), the "text
field" should be treated as if it is a button, and the trailing button
should **not** be announced separately. When the text field is
focusable, it's reasonable to separate text field and the trailing
button, so I leave it as is.
The native app doesn't announce "expanded"/"collapsed", so I use
`Semantics.hint` to achieve the goal.
This demo is to show the screen reader announcement.
https://github.com/user-attachments/assets/e7a9da8f-acf8-4018-a778-1ded1b07103c
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
## Description
This PR fixes DropdownMenu menu panel being shorter than the TextField
when it expands to full-screen width.
## Before
The menu panel is shorter than the text field:
<img width="297" height="130" alt="image"
src="https://github.com/user-attachments/assets/db42bd01-94d8-47fb-9331-ebd78111b931"
/>
## After
The menu panel expands as close as possible to the edge similarly to the
text field.
<img width="297" height="130" alt="image"
src="https://github.com/user-attachments/assets/b7d8f2aa-a668-439a-8195-9b9ce48dba6b"
/>
## Code sample
<details><summary>Code sample for recordings</summary>
```dart
import 'package:flutter/material.dart';
void main() {
runApp(const DropdownMenuExample());
}
class DropdownMenuExample extends StatefulWidget {
const DropdownMenuExample({super.key});
@override
State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}
class _DropdownMenuExampleState extends State<DropdownMenuExample> {
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: DropdownMenu<int>(
expandedInsets: EdgeInsets.zero,
dropdownMenuEntries: <DropdownMenuEntry<int>>[
DropdownMenuEntry<int>(value: 0, label: 'Flutter'),
],
),
),
);
}
}
```
</details>
## Implementation details
MenuAnchor automatically adds a default padding, see
2c21273bfd/packages/flutter/lib/src/material/menu_anchor.dart (L81-L82)
This PR add a property to menu anchor to expose the view padding.
DropdownMenu sets this padding to EdgeInsets.zero to opt-out from the
default 8 padding.
## Related Issue
Fixes [DropdownMenu children is shorter than the TextField when it
expands to full-screen
width](https://github.com/flutter/flutter/issues/172680)
## Tests
Adds 2 tests.
---------
Co-authored-by: Qun Cheng <36861262+QuncCccccc@users.noreply.github.com>
## Description
The current behavior of Flutter regarding `DropdownMenu` text field is
very basic: `DropdownMenu` updates the text field once a selection has
been made with its coordinating `label`, and nothing more.
If the selection's `label` changes, the text field will still show the
old value, although the menu buttons have been updated.
This not only results in the need to write a lot of boilerplate code to
match the label to the current selection, but it's also
counterintuitive. The `DropdownMenu` should handle rematching by itself.
Issue #155660, touched on this, and a solution was introduced in
#155757. It was later reverted due to it restricting some use cases.
That issue & solution, however, only address `initialSelection`. If
another selection was made and its corresponding `label` was changed,
the text field would still show the old value, bringing us back to
square one.
This PR should not conflict with any previous behavior of
`DropdownMenu`: any new value provided by `initialSelection` or via
controller would not be overwritten by rematching. However, entries with
the same value will be mapped to a single label (the first matched
entry's label).
## Related Issues
- Fixes#155660.
## Tests
Added 3 tests.
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
This PR adds support for hiding the trailing icon in `DropdownMenu`
widget. Currently, there's no built-in option to remove it.
The change is non-breaking, as the trailing icon remains visible by
default unless `showTrailingIcon` is explicitly set to `false`. The
`showTrailingIcon` parameter follows a similar pattern to its use in the
`ExpansionTile` widget.
Fixes#164908
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
---------
Co-authored-by: Qun Cheng <36861262+QuncCccccc@users.noreply.github.com>
## Description
This PR introduces `DropdownMenu.restorationId`.
This value is passed to the inner `TextField.restorationId` which is
required to activate the TextField restoration capability.
## Related Issue
Required for https://github.com/flutter/flutter/pull/163721
## Tests
Adds 1 test.
Fix: Focus on leading icon when null
fixes: #164905
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
## Description
This PR fixes DropdownMenu arrow icon position when
`InputDecoration.isCollapsed` is set to true and
`InputDecoration.suffixConstraints` is set to a smaller value than the
min interactive height.
It makes it possible to use collapsed `DropdownMenu` such as:
_____
Before this PR and https://github.com/flutter/flutter/pull/153089,
`InputDecoration.isCollapsed` had no impact on the `DropdownMenu` height
and there was no solution to reduce the height because its minimum
height is enforced by the `IconButton` (arrow down or up) which is part
of the `DropdownMenu`.
Since https://github.com/flutter/flutter/pull/153089, the height can be
reduce with `InputDecoration.suffixIconConstraints` but it results in
the icon being misaligned:
After this PR:
When `InputDecoration.suffixIconConstraints` is used the icon is
correctly aligned:
<details><summary>Code sample</summary>
```dart
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(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Center(
child: DropdownMenu<String>(
dropdownMenuEntries: [
DropdownMenuEntry(label: 'Item 1', value: '1'),
DropdownMenuEntry(label: 'Item 2', value: '2'),
],
inputDecorationTheme: InputDecorationTheme(
contentPadding: EdgeInsets.fromLTRB(5, 0, 5, 0),
isCollapsed: true,
// Usable since https://github.com/flutter/flutter/pull/153089.
suffixIconConstraints: BoxConstraints(minHeight: 24, maxHeight: 24),
filled: true,
),
),
),
),
);
}
}
```
</details>
## Related Issue
Fixes [DropdownMenu inputDecoration isCollapsed property does not reduce
vertical spacing](https://github.com/flutter/flutter/issues/138691)
## Tests
Adds 2 tests.
## Description
This PR reverts `DropdownMenu` changes from
https://github.com/flutter/flutter/pull/155757.
Automatically rematching the `initialSelection` breaks some use cases.
It is more flexible to let users manipulate the text field content using
the TextEditingController.
## Related Issue
Fixes [Dropdown Menu Creates Infinite Build
Loop](https://github.com/flutter/flutter/issues/160196)
Fixes [Can no longer initialize non selectable value in DropdownMenu as
of flutter version
3.27.1](https://github.com/flutter/flutter/issues/160555)
## Tests
Removes 2 regression tests from
https://github.com/flutter/flutter/pull/155757.
Keeps 2 tests from the original PR (missing test for the
initialSelection behavior).
Adds 1 tests to avoid regressing this revert.
This auto-formats all *.dart files in the repository outside of the
`engine` subdirectory and enforces that these files stay formatted with
a presubmit check.
**Reviewers:** Please carefully review all the commits except for the
one titled "formatted". The "formatted" commit was auto-generated by
running `dev/tools/format.sh -a -f`. The other commits were hand-crafted
to prepare the repo for the formatting change. I recommend reviewing the
commits one-by-one via the "Commits" tab and avoiding Github's "Files
changed" tab as it will likely slow down your browser because of the
size of this PR.
---------
Co-authored-by: Kate Lovett <katelovett@google.com>
Co-authored-by: LongCatIsLooong <31859944+LongCatIsLooong@users.noreply.github.com>
## Description
This PR fixes some typos on `MenuAnchor` and improve the readability of a `DropdownMenu` test utility function.
@justinmc I'm still considering creating a test utils file for DropdownMenu but there are few utilities and I'm worried that helper functions in utils file will cripple completion results (not a big deal because it is just for people working on the framework) but I think this should be used carefully. For instance the function `getButtonMaterial` would have to be renamed to something less generic if exposed more broadly (`getMenuItemButtonMaterial` for instance).
## Description
This PR introduces some utility functions to simplify some DropdownMenu tests.
The main purpose is to centralize and document how tests should find menu items, because it is tricky as there are two occurrences of each widgets and using '.last' is mandatory:
```dart
Finder findMenuItemButton(String label) {
// For each menu items there are two MenuItemButton widgets.
// The last one is the real button item in the menu.
// The first one is not visible, it is part of _DropdownMenuBody
// which is used to compute the dropdown width.
return find.widgetWithText(MenuItemButton, label).last;
}
```
## Related Issue
This is extracted from https://github.com/flutter/flutter/pull/157496.
## Tests
Refactors many existing tests.
## Description
This PR fixes keyboard navigation when `DropdownMenu.expandedInsets` is used.
Before this PR the Shortcuts widget defining the navigation intents was only added when `DropdownMenu.expandedInsets` was null.
After this PR, the Shortcuts widget is always added.
## Related Issue
Fixes [DropdownMenu keyboard navigation is broken when expandedInsets is set](https://github.com/flutter/flutter/issues/156712).
## Tests
Adds 2 tests.
Replaces several unneeded 'pumpAndSettle'.
## Description
This PR adds a utility method, named `isItemHighlighted`, to simplify several `DropdownMenu` tests.
It will help for some inworking changes.
