fix: remove child from old parent when moving to new parent via addChild

[liuruenshen]

Description

A child component may have been assigned to another
parent before assigning that child component to the
new parent via "addChild" method. In this case, the
original parent should remove the child then it can
be safely added back to the new parent. This commit
will keep the parent's "children_" and its DOM
element's child nodes in the consistent state.

Specific Changes proposed

Remove the specific child component from the old parent component before adding the child component to the new parent

Requirements Checklist

• Feature implemented / Bug fixed
• If necessary, more likely in a feature request than a bug fix
  • Change has been verified in an actual browser (Chome, Firefox, IE)
  • Unit Tests updated or fixed
  • Docs/guides updated
  • Example created (starter template on JSBin)
• Reviewed by Two Core Contributors

[welcome]

💖 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.

[gkatsev]

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?

[liuruenshen]

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.

[liuruenshen]

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.

[gkatsev]

Awesome, thanks for the tests! I was able to verify locally that tests fail and the change makes sense. With me approving, we just need someone else from the core team to approve for it to land.

[liuruenshen]

It is my pleasure. 😄

[misteroneill]

Nice!

[welcome]

Congrats on merging your first pull request! 🎉🎉🎉