Fix removing event listener for shadow root element (#973)

* Fix removing event listener for shadow root element

* Add test from PR #965

Author: mkszepp

ember-basic-dropdown/src/components/basic-dropdown-content.ts

@@ -70,6 +70,7 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
   private handleRootMouseDown?: RootMouseDownHandler;
   private scrollableAncestors: Element[] = [];
   private mutationObserver: MutationObserver | undefined;
+  private rootElement: HTMLElement | undefined;
   @tracked private _contentWormhole?: Element;
   @tracked animationClass = this.transitioningInClass;
 
@@ -186,16 +187,18 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
       );
 
       // We need to register closing event on shadow dom element, otherwise all clicks inside a shadow dom are not closing the dropdown
-      let rootElement;
+      // In additional store the rootElement for outside clicks (ensure that we do removeEventListener on correct element)
       if (
         this._contentWormhole &&
         this._contentWormhole.getRootNode() instanceof ShadowRoot
       ) {
-        rootElement = this._contentWormhole.getRootNode() as HTMLElement;
+        this.rootElement = this._contentWormhole.getRootNode() as HTMLElement;
+      } else {
+        this.rootElement = undefined;
       }
 
-      if (rootElement) {
-        rootElement.addEventListener(
+      if (this.rootElement) {
+        this.rootElement.addEventListener(
           this.args.rootEventType || 'click',
           this.handleRootMouseDown,
           true,
@@ -216,13 +219,13 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
         );
         document.addEventListener('touchend', this.handleRootMouseDown, true);
 
-        if (rootElement) {
-          rootElement.addEventListener(
+        if (this.rootElement) {
+          this.rootElement.addEventListener(
             'touchstart',
             this.touchStartHandlerBound,
             true,
           );
-          rootElement.addEventListener(
+          this.rootElement.addEventListener(
             'touchend',
             this.handleRootMouseDown,
             true,
@@ -247,16 +250,8 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
           true,
         );
 
-        let rootElement;
-        if (
-          this._contentWormhole &&
-          this._contentWormhole.getRootNode() instanceof ShadowRoot
-        ) {
-          rootElement = this._contentWormhole.getRootNode() as HTMLElement;
-        }
-
-        if (rootElement) {
-          rootElement.removeEventListener(
+        if (this.rootElement) {
+          this.rootElement.removeEventListener(
             this.args.rootEventType || 'click',
             this.handleRootMouseDown as RootMouseDownHandler,
             true,
@@ -275,13 +270,13 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
             true,
           );
 
-          if (rootElement) {
-            rootElement.removeEventListener(
+          if (this.rootElement) {
+            this.rootElement.removeEventListener(
               'touchstart',
               this.touchStartHandlerBound,
               true,
             );
-            rootElement.removeEventListener(
+            this.rootElement.removeEventListener(
               'touchend',
               this.handleRootMouseDown as RootMouseDownHandler,
               true,

test-app/tests/integration/components/basic-dropdown-test.js

@@ -1397,6 +1397,54 @@ module('Integration | Component | basic-dropdown', function (hooks) {
     wormhole.remove();
   });
 
+  test('Shadow dom: Its `toggle` action opens and closes the dropdown with renderInPlace', async function (assert) {
+    await render(hbs`
+        <Shadow>
+            <BasicDropdown @renderInPlace={{true}} as |dropdown|>
+                <dropdown.Trigger>Click me</dropdown.Trigger>
+                <dropdown.Content>
+                    <div style="height: 100px; width: 100px; background: black" id="dropdown-is-opened"></div>
+                </dropdown.Content>
+            </BasicDropdown>
+        </Shadow>
+    `);
+
+    assert
+      .dom('#dropdown-is-opened', this.element.getRootNode())
+      .doesNotExist('The dropdown is closed');
+
+    const triggerElement = find('[data-shadow]')?.shadowRoot.querySelector(
+      '.ember-basic-dropdown-trigger',
+    );
+
+    await click(triggerElement);
+
+    assert
+      .dom('.ember-basic-dropdown-content', find('[data-shadow]').shadowRoot)
+      .exists('The dropdown is rendered');
+
+
+    assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown is opened');
+
+    await click(find('[data-shadow]').shadowRoot.getElementById('dropdown-is-opened'));
+
+    assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown stays opened when clicking content');
+
+    await click(triggerElement);
+
+    assert
+      .dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot)
+      .doesNotExist('The dropdown is closed again');
+
+    await click(triggerElement);
+
+    assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown is opened 2d time');
+
+    await click(find('[data-shadow]').shadowRoot.getElementById('dropdown-is-opened'));
+
+    assert.dom('#dropdown-is-opened', find('[data-shadow]').shadowRoot).exists('The dropdown stays opened when clicking content after 2d open');
+  });
+
   test('Shadow dom: Its `toggle` action opens and closes the dropdown when wormhole is inside shadow dom', async function (assert) {
     await render(hbs`
       <Shadow>
@@ -1406,7 +1454,7 @@ module('Integration | Component | basic-dropdown', function (hooks) {
             <div id="dropdown-is-opened"></div>
           </dropdown.Content>
         </BasicDropdown>
-        
+
         <div id="wormhole-in-shadow-dom"></div>
       </Shadow>
     `);