PopupPanel with DisclosurePanels Always Showing & Not Closing in Mobile GWT UI

[divyanshu kumar]

Hi everyone,

I’m working on a mobile-only GWT interface in App Inventor and I’m running into a frustrating issue with my hamburger menu’s popup panel. I’d appreciate any advice on what I’m doing wrong and how to fix it.

---

Problem Description

• What I want:

  1. User clicks the hamburger icon (<ai:DropDownButton>).

  2. A centered popup appears on the mobile screen containing two DisclosurePanels (“Projects” and “Build”).

  3. Clicking outside the popup closes it.

  4. Clicking the hamburger again repeats the cycle.

• What’s happening now:

  • As soon as the page loads (without any click), the popup is already visible.

  • Clicking outside does not close the popup.

---

🔍 Code Snippets

Code Link : https://codefile.io/f/QdcBxeQPbk

---

🔨 What I’ve Tried

1. Removed any menuPopup.show() calls outside the click handler.

2. Ensured autoHideEnabled="true" so GWT should hide on outside clicks.

3. Centered via both CSS transform and menuPopup.center().

Despite all this, the popup still:

• Loads automatically

• Doesn’t close on outside clicks

• Shows only a blank black box, no disclosure panels

---

❗ Questions / Request

1. Why is the popup visible on initial page load, even though I never call .show() or .center()?

2. How can I ensure it only appears when settingsDropDown is clicked?

3. Why doesn’t autoHideEnabled=true close it on outside clicks?

4. What’s the best practice for centering a GWT PopupPanel on mobile without conflicting CSS?

Any guidance, code suggestions, or pointers to GWT docs would be hugely appreciated! 🙏

Thanks in advance,

[Craig Mitchell]

I haven't dived into all your code, but one thing that stands out is:

@UiField PopupPanel menuPopup;

That seems wrong.  You only want to create a PopupPanel when the button is clicked.  You don't want the UIBinder creating it on the creation of your main widget.

[divyanshu kumar]

Thank you once again for your guidance. I resolved the issue successfully by following your instructions.