Dropdown content staying on screen after widget removal

[NotYou404]

Bug Report

Whenever you open a UIDropdown the options stay on screen even after the dropdown has been removed from the UIManager, if the dropdown wasn't closed.

System Info

Arcade 3.0.0.dev25
------------------
vendor: Intel
renderer: Intel(R) UHD Graphics
version: (3, 3)
python: 3.9.13 (tags/v3.9.13:6de2ca5, May 17 2022, 16:36:42) [MSC v.1929 64 bit (AMD64)]
platform: win32
pyglet version: 2.0.9
PIL version: 9.5.0

Actual behavior:

After the widget was removed the dropdown options stay on the screen, without the dropdown itself (see image).

Expected behavior:

The options should disappear; the operation should cancel.

Steps to reproduce/example code:

A pretty easy way to reproduce is running the GUI Menu example here and opening the volume or options submenu, then expanding the dropdown and pressing "Back" without closing the dropdown before. However this issue also exists without the submenu, so it's not special to the example.

Enhancement request:

What should be added/changed?

Make the dropdown options disappear when the dropdown isn't rendered anymore.

What would it help with?

Fixing a common glitch that would be common with all arcade games using dropdowns in submenus.

[NotYou404]

An unelegant way of fixing might be adding these lines to UIWidget.remove() (I think):

    def remove(self, child: "UIWidget"):
        """
        Removes a child from the UIManager which was directly added to it.
        This will not remove widgets which are added to a child of UIManager.
        """
        child.parent = None
        for c in self._children:
            if c.child == child:
                self._children.remove(c)
+               if isinstance(c, UIDropdown):
+                   c._hide_overlay()

Or something like this.
However an on_remove() callback event for all widgets might come in handy in other places as well.

[NotYou404]

Another option would be adding this method to the UIDropdown:

    def set_overlay_visibility(self, value: bool) -> None:
        try:
            if value:
                self._show_overlay()
            else:
                self._hide_overlay()
        except AttributeError:
            pass

So in the SubMenu Example you could just add this line to the on_click_back_button() method:

    def on_click_back_button(self, event):
+       # Assuming the dropdown has been assigned to self, wich is not the case in the example.
+       self.dropdown.set_overlay_visibility(False)
        # Removes the widget from the manager.
        # After this the manager will respond to its events like it previously did.
        self.parent.remove(self)

[eruvanos]

I see the issue, thank you for reporting.

So you mentioned two options:
A) callback on remove
B) explicitly setting overlay visibility

---

B) feels like a bad design, because it forces UIDropdown users to be aware of the bug and prevent it.

A) feels like a common thing to have in a GUI system (like React.on_mount etc.)
I remember I did already workarounds, because I had nothing like that implemented.

---

Another option C) would we to capture any mouse click event which does not hit the overlay and close it automatically.
Most dropdowns work like that.

---

I will check if C) could be a quick win and add a new issue for the callbacks. Somethings to consider...

[eruvanos]

Callbacks requested in #1955

[eruvanos]

@NotYou404 please let me know if the pushed changes work for you

[NotYou404]

Works amazing, sorry for the very late answer!