Repository navigation
Items in the overflow of the TextSelectionToolbar should take the width of the largest item #144089
Description
Steps to reproduce
- create a Material style
TextSelectionToolbarwithcontextMenuBuilderof aTextField,TextFormFieldor similar - make the context menu items overflow to show the overflow button
2.1. if you are in DartPad and the menu does not overflow, you can drag the vertical divider between the code and the display to make the display smaller.
2.2. similarly, you can add more ContextMenuButtonItems to the Toolbar to make it wider - open the overflow menu
Expected results
All items in the overflow menu should have the width of the largest item
Actual results
All items have their own minimal width resulting in a non-clickable area beside them
Code sample
Code sample
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
if (kIsWeb) {
BrowserContextMenu.disableContextMenu();
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: TextFormField(
initialValue: "Example Text",
contextMenuBuilder: (context, editableTextState) {
final anchors = editableTextState.contextMenuAnchors;
final buttonItems = [
ContextMenuButtonItem(label: "More items", onPressed: () {}),
ContextMenuButtonItem(label: "To make the menu", onPressed: () {}),
ContextMenuButtonItem(label: "Overflow", onPressed: () {}),
...editableTextState.contextMenuButtonItems,
ContextMenuButtonItem(label: "Long example menu item", onPressed: () {}),
ContextMenuButtonItem(label: "Short", onPressed: () {}),
];
// Follwing is the code that AdaptiveTextSelectionToolbar uses when the platform is android.
// I copied it to force the material style toolbar
final List<Widget> buttons = <Widget>[];
for (int i = 0; i < buttonItems.length; i++) {
final ContextMenuButtonItem buttonItem = buttonItems[i];
buttons.add(TextSelectionToolbarTextButton(
padding: TextSelectionToolbarTextButton.getPadding(
i, buttonItems.length),
onPressed: buttonItem.onPressed,
child: Text(AdaptiveTextSelectionToolbar.getButtonLabel(
context, buttonItem)),
));
}
return TextSelectionToolbar(
anchorAbove: anchors.primaryAnchor,
anchorBelow: anchors.secondaryAnchor == null
? anchors.primaryAnchor
: anchors.secondaryAnchor!,
children: buttons,
);
},
),
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
The buttons with shorter text do not take the full width, resulting in a non-clickable area on their right hand side
Logs
No response
Flutter Doctor output
Doctor output
noneThe example code was executed in DartPad with Dart 3.3.0 and Flutter 3.19.0 on the Stable channel
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listSelectableRegion, SelectionArea, SelectionContainer, Selectable, and related APIsFound to occur in 3.19Found to occur in 3.20flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Type
Projects
- Status
Activity
[-]Items in the overflow the TextSelectionToolbar should take the width of the largest item[/-][+]Items in the overflow of the TextSelectionToolbar should take the width of the largest item[/+]dam-ease commentedon Feb 26, 2024
Thanks for filing this @JannikWinter.
I can't seem to reproduce this on my end both on mobile and testing with DartPad (the toolbar doesn't come up).
Can you please provide more information on the reproduction steps?
JannikWinter commentedon Feb 26, 2024
Thank you for looking into this and sorry for the inconvenience @dam-ease.
I updated the reproduction steps and the example code :)
dam-ease commentedon Feb 27, 2024
Thanks for your response and the update @JannikWinter
I can reproduce this on the latest
masterandstablechannels.Simulator.Screen.Recording.-.iPhone.15.-.2024-02-27.at.07.43.29.mp4
stable, master flutter doctor -v
Horizontally expand text selection toolbar buttons in overflow menu (#…
github-actions commentedon Mar 15, 2024
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 -vand a minimal reproduction of the issue.Horizontally expand text selection toolbar buttons in overflow menu (…