Menu Component: active class does not work (first method)

[steevepay]

The first method to show the menu requires only the class active, however, I couldn't make it work:

<button>
  <span>Button</span>
  <menu class="no-wrap active">
    <a>Item</a>
    <a>Item</a>
    <a>Item</a>
  </menu>
</button>

When I click on an item and remove the class active, the menu is still visible because :not([data-ui]):focus-within > menu CSS definition is taking over. Screenshot:

The alternative solution I found is to add a dummy data-ui, and it will only use the active class to show/hide the menu:

<button data-ui="btn">
  <span>Button</span>
  <menu class="no-wrap active">
    <a>Item</a>
    <a>Item</a>
    <a>Item</a>
  </menu>
</button>

[greenersharp]

Is a fix for this coming?
Removing the .active class from the menu is still not closing the menu.

[Baraw]

Also, the list is allways showing at the bottom of the menu. So you can't use the button at the bottom of the screen