Flutter bug with PopupMenuButton and TextFiend inside AlertDialog

Question

I have an AlertDialog that contains a TextField and a PopupMenuButton. When the TextField has focus and the keyboard is open, the AlertDialog is in a "raised" position, but if I press the PopupMenuButton, the TextField get unfocus, and the animations of the AlertDialog "going down" (because the keyboard disappeard) and the PopupMenuButton opening start togheter, and result in a wrong position of PopupMenuItems. How can I solve this?

I tried to edit the PopupMenuButton class but I don't know how to wait until the AlertDialog is repositioned to show the popup menu.

This is a sample of code that replicate the problem

return AlertDialog(
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      TextField(),
      PopupMenuButton(itemBuilder: (BuildContext context)=>[PopupMenuItem(child: Text('123')),PopupMenuItem(child: Text('456'))])
    ],
  ),
);

This is a gif showing the bug: https://i.stack.imgur.com/dNjq1.gif

I added an example code that in my device replicate the problem. — Mental, Jan 24 '23 at 11:14
will this post help? https://stackoverflow.com/questions/50758121/how-dynamically-create-and-show-a-popup-menu-in-flutter — dfassf, Jan 24 '23 at 11:28
@Mental what do you expect from the design result can you include the example? — Stanly, Jan 24 '23 at 11:36
@Mental so you mean you want it to be closed when the keyboard is closed? — Stanly, Jan 24 '23 at 12:07
I want it to wait until the AlertDialog reposition to the normal position (after the keyboard is fully closed) and then to show the popupmenu items — Mental, Jan 24 '23 at 12:09
oh i see, when you clicked the popup button the dialog show at the to right? — Stanly, Jan 24 '23 at 12:11
The problem is that the dialog show at the initial position of the popupmenubutton, but then the alertdialog go down with the popupmenubutton, but the dialog stays in the initial position — Mental, Jan 24 '23 at 12:23

Stanly · Accepted Answer · 2023-01-24T16:01:43.357

after getting some hours for researching that was PopupMenuButton normal behaviour, when I tried to recreate the PopupMenuButton manually, it work as that because when clicked it get the first position of the below menubutton so when i recreate it, it look like this

class TestWidget extends StatefulWidget {
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  void _showPopupMenu(Offset offset) async {
    double left = offset.dx;
    double top = offset.dy;
    await showMenu(
      context: context,
      position: RelativeRect.fromLTRB(left, top, 0, 0),
      items: [
        const PopupMenuItem<String>(value: 'Doge', child: Text('Doge')),
        const PopupMenuItem<String>(value: 'Lion', child: Text('Lion')),
      ],
      elevation: 8.0,
    );
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const TextField(),
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTapDown: (TapDownDetails details) {
              FocusScopeNode currentFocus = FocusScope.of(context);

              if (!currentFocus.hasPrimaryFocus) {
                currentFocus.unfocus();
              }

              Future.delayed(const Duration(milliseconds: 500), () {
                setState(() {
                  _showPopupMenu(details.globalPosition);
                });
              });
            },
            child: (const Icon(Icons.blender_outlined)),
          ),
          PopupMenuButton(
              itemBuilder: (BuildContext context) => [
                    const PopupMenuItem(child: Text('123')),
                    const PopupMenuItem(child: Text('456'))
                  ])
        ],
      ),
    );
  }
}

so i think there's no better option for it. prefer not using popup and just design the design in a singlechildscrollview

Sorry I didn't explain myself, I added a gif in the question showing the bug. The textfield and the popupmenubutton are not together. — Mental, Jan 24 '23 at 11:52
Yes it seems there is no solution, I just added in the PopupMenuButton a check if the textfield is focused and instead of opening it just unfocus the textfield, so to open it the textfield must be unfocused. Thank you very much for your time. — Mental, Jan 24 '23 at 17:30
@Mental ya so when the keyboard is visible the button can't be clicked right? — Stanly, Jan 25 '23 at 03:46
Yes it just unfocuses the keyboard, but it doesn't open the PopupMenu — Mental, Jan 25 '23 at 14:22

Flutter bug with PopupMenuButton and TextFiend inside AlertDialog

1 Answers1