Repository navigation
PopupMenuButton click area is wrong when placed in an InputDecoration #145324
Description
Steps to reproduce
Place a PopupMenuButton as label of an InputDecoration object
Expected results
When hovering over the PopupMenuButton it should be possible to click on it.
Actual results
The click area of the PopupMenuButton is not correct. Instead of clicking on the button, the mouse must be moved further down to activate it.
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: EconomicConditionsView(),
),
);
}
}
class EconomicConditionsView extends StatelessWidget {
const EconomicConditionsView({
super.key,
});
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(1, (index) => getPayerWidget(index)),
);
}
Widget getPayerWidget(int index) {
return InputDecorator(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.black),
borderRadius: BorderRadius.circular(25),
),
label: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text('Hola'),
PopupMenuButton<String>(
itemBuilder: (context) {
return List.generate(
5,
(i) => PopupMenuItem(
value: i.toString(), child: Text('Item $i')));
},
)
],
),
),
child: Column(children: [
Text('Adios'),
Text('Adios'),
Text('Adios'),
Text('Adios'),
Text('Adios'),
Text('Adios'),
Text('Adios'),
Text('Adios'),
Text('Adios'),
Text('Adios'),
Text('Adios'),
Text('Adios'),
]),
);
}
}Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.10.5, on Microsoft Windows [Versi¢n 10.0.19045.4170], locale es-ES)
• Flutter version 3.10.5 on channel stable at C:\Users\fdemiguel.STT\fvm\versions\3.10.5
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 796c8ef792 (9 months ago), 2023-06-13 15:51:02 -0700
• Engine revision 45f6e00911
• Dart version 3.0.5
• DevTools version 2.23.1
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
• Android SDK at C:\Users\fdemiguel.STT\AppData\Local\Android\sdk
• Platform android-33, build-tools 32.1.0-rc1
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[!] Visual Studio - develop for Windows (Visual Studio Build Tools 2019 16.11.31)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
• Visual Studio Build Tools 2019 version 16.11.34114.132
• Windows 10 SDK version 10.0.17763.0
X The current Visual Studio installation is incomplete. Please reinstall Visual Studio.
[√] Android Studio (version 2021.2)
• Android Studio at C:\Program Files\Android\Android Studio
• 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.12+7-b1504.28-7817840)
[√] VS Code (version 1.87.2)
• VS Code at C:\Users\fdemiguel.STT\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.84.0
[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Versi¢n 10.0.19045.4170]
• Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.129
• Edge (web) • edge • web-javascript • Microsoft Edge 122.0.2365.80
[√] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.
Activity
fdemiguel commentedon Mar 18, 2024
It seems that the problem is not related to the PopupMenuButton as it also happens with the TextButton. Maybe the problem is more related to the InputDecoration
danagbemava-nc commentedon Mar 19, 2024
Hi @fdemiguel, what are you trying to achieve by placing the
PopupMenuButtonas the label of theInputDecoration?Also, your flutter doctor shows you're using an older version of flutter. Kindly upgrade to the latest version of flutter to see if you still experience this issue. If you do, please provide the updated output of
flutter doctor -v.Thank you
fdemiguel commentedon Mar 19, 2024
Hi @danagbemava-nc
Yesterday I tested it on dartpad (3.19.3) and the same thing happened.
The reason why I want to place a PopupMenuButton as the label of an InputDecoration is that I want to give the user the option to do certain things on a group of elements, in this case, the child of the InputDecoration. Those things would be the items of the PopupMenuButton.
Thank you very much
danagbemava-nc commentedon Mar 20, 2024
Hi @fdemiguel, if I understand what you're trying to achieve, I don't think it will be a good user experience for your users. It might be best for you to have a separate field that controls the option you want to apply to the group.
It would help if you could provide a screenshot of what exactly it is that you want to achieve.
Thank you
fdemiguel commentedon Mar 20, 2024
Hi @danagbemava-nc
PopupMenuButton items are economic entities used in the past by the person. When you select one of them, the data on the screen is updated.
danagbemava-nc commentedon Mar 21, 2024
IMO, the "temporary solution" will provide a better experience for your users as most users do not expect the label of an input area to perform an action. You just might want to indicate to them that they would want to click on that area.
However, it does seem like there's a bug in the popup ink area calculation when it is used in this scenario (and perhaps other similar scenarios). Labeling for further insight from the team.
Screen.Recording.2024-03-21.at.06.54.35.mov
flutter doctor -v
1 remaining item
flutter-triage-bot commentedon Mar 29, 2024
Issue is assigned to multiple teams (design, text-input). Please ensure the issue has only one
team-*label at a time. Usefyi-*labels to have another team look at the issue without reassigning it.justinmc commentedon Apr 4, 2024
I agree this this is an unusual UI, but really we shouldn't have weird issues with the hit testing here. Flutter should be able to do this.
One thing I notice is that it's probably not the right approach to use InputDecorator for drawing this kind of UI border, even though they look so similar. I would try to write your own widget that draws a border like this with a button in it.
Also out of curiosity I wonder if this works if you use a TextField with an InputDecorator instead of just an InputDecorator directly...
Anyway the problem may lie in InputDecorator's layout of the
label. We're probably doing the hit testing without considering its transform or something like that.[material_ui] Hit test the floating label of InputDecorator at its pa…
[material_ui] Hit test the floating label of InputDecorator at its pa…