Side panel, button dropdown and sidebar quick fixes

addon/components/o-s-s/side-panel.ts

@@ -46,8 +46,8 @@ export default class OssSidePanel extends Component<OssSidePanelArgs> {
   }
 
   @action
-  onClickOutside(_: any, event: Event): void {
-    const sidePanelElement = document.querySelector('.oss-side-panel');
+  onClickOutside(backdrop: HTMLElement, event: Event): void {
+    const sidePanelElement = backdrop.closest('.oss-side-panel');
     if (sidePanelElement?.contains(event.target as Node)) return;
 
     if (event.target === this.initialTarget) {

app/styles/molecules/button-dropdown.less

@@ -127,6 +127,7 @@
     min-width: 180px;
     border: 1px solid var(--color-border-default);
     border-radius: var(--border-radius-sm);
+    overflow: hidden;
     z-index: 99;
 
     &--visible {

app/styles/organisms/sidebar.less

@@ -316,6 +316,7 @@ a.oss-sidebar-item {
 
   &:not(&--expanded) &__items-container--visible {
     .box-shadow-md;
+    border: 1px solid var(--color-border-default);
     position: absolute;
     top: 0;
     left: calc(var(--sidebar-width) - var(--spacing-px-3));

tests/integration/components/o-s-s/side-panel-test.ts

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { click, render } from '@ember/test-helpers';
+import { click, render, type TestContext } from '@ember/test-helpers';
 import sinon from 'sinon';
 
 module('Integration | Component | o-s-s/side-panel', function (hooks) {
@@ -168,4 +168,39 @@ module('Integration | Component | o-s-s/side-panel', function (hooks) {
       assert.ok(this.onClose.calledOnce, 'Clicked on the transparent backdrop so the side panel closes.');
     });
   });
+
+  module('When two side panels are mounted', (hooks) => {
+    hooks.beforeEach(function (this: TestContext) {
+      this.onCloseFirst = sinon.stub();
+      this.onCloseSecond = sinon.stub();
+    });
+
+    async function renderSidePanels() {
+      await render(
+        hbs`
+          <div data-control-name="outside-side-panels"></div>
+          <OSS::SidePanel @visible={{true}} @backdrop={{true}} @onClose={{this.onCloseFirst}} />
+          <OSS::SidePanel @visible={{true}} @backdrop={{true}} @onClose={{this.onCloseSecond}}>
+            <:main>
+              <div data-control-name="second-side-panel-content"></div>
+            </:main>
+          </OSS::SidePanel>`
+      );
+    }
+
+    test('Clicking inside the second side panel does not close it', async function (this: TestContext, assert) {
+      await renderSidePanels();
+      await click('[data-control-name="second-side-panel-content"]');
+
+      assert.true(this.onCloseSecond.notCalled);
+    });
+
+    test('Clicking outside both side panels closes them', async function (this: TestContext, assert) {
+      await renderSidePanels();
+      await click('[data-control-name="outside-side-panels"]');
+
+      assert.true(this.onCloseFirst.calledOnceWithExactly());
+      assert.true(this.onCloseSecond.calledOnceWithExactly());
+    });
+  });
 });