💖 Thanks for opening this pull request! 💖

Things that will help get your PR across the finish line:

• Run npm run lint -- --errors locally to catch formatting errors earlier.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

So, the reason for this is so that the internal children array in our component system stays up-to-date when components move around in the DOM? Otherwise, the previous parent would have a reference to the child component even if the child component wasn't actually a child anymore?
Would you be able to add a test for this?

So, the reason for this is so that the internal children array in our component system stays up-to-date when components move around in the DOM? Otherwise, the previous parent would have a reference to the child component even if the child component wasn't actually a child anymore?
Would you be able to add a test for this?

Yes, for example, if I want to add the new menu item of the menu button dynamically, a class can be implemented as follows:

export class MutableMenuButton extends MenuButton {
  constructor(player, options) {
    super(player, options)

    this.items_ = []
  }

  insertItem(item, index) {
    this.items_.splice(index, 0, item)

    // Trigger the `update` method from `MenuButton` to re-render the layout
    this.update()
  }

  // Override the abstract method
  createItems() {
    return this.items_
  }
}

export default MutableMenuButton

But what i found is whenever the "MutableMenuButton".inserItem gets called, the existed menu item is removed from the new menu that belongs to the menu button.
After digging into the code, I found that the old, about to be removed menu instance still hold the child component that is already to move to the new menu component.
Because any discarded component will dispose of its children, so the DOM element of the existed menu item attached to the new menu will be erased from the DOM, this is why the new menu can't see the menu item that already in place.

So that is why I commit this change, if you think that is acceptable, I will add some tests.

I have added two unit test cases for this fix.
If the fix commit is reverted, these tests will fail due to the reason I mentioned before.

It is my pleasure. 😄

Congrats on merging your first pull request! 🎉🎉🎉