test repro issue when in shadow dom and renderInPlace

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

@@ -11,6 +11,7 @@ import {
   waitUntil,
   find,
   settled,
+  pauseTest
 } from '@ember/test-helpers';
 
 let deprecations = [];
@@ -1397,6 +1398,55 @@ 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 +1456,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>
     `);