Fixes #323

docs/getting-started/changelog.md

@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `label` and `helpText` props and slots to `sl-range` [#318](https://github.com/shoelace-style/shoelace/issues/318)
 - Fixed a bug in `sl-select` where removing a tag would toggle the dropdown
 - Fixed a bug in `sl-input` and `sl-textarea` where the input might not exist when the value watcher is called [#313](https://github.com/shoelace-style/shoelace/issues/313)
+- Fixed a bug in `sl-details` where hidden elements would receive focus when tabbing [#323](https://github.com/shoelace-style/shoelace/issues/323)
 - Updated `sl-menu-item` focus styles
 - Updated `sl-select` so tags will wrap when `multiple` is true
 - Updated to Stencil 2.4.0

src/components/details/details.tsx

@@ -64,6 +64,8 @@ export class Details {
   componentDidLoad() {
     focusVisible.observe(this.details);
 
+    this.body.hidden = !this.open;
+
     // Show on init if open
     if (this.open) {
       this.show();
@@ -88,6 +90,8 @@ export class Details {
       return;
     }
 
+    this.body.hidden = false;
+
     if (this.body.scrollHeight === 0) {
       // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
       // intiially, but not immediately visible (i.e. in a tab panel).
@@ -137,6 +141,7 @@ export class Details {
       this.body.style.overflow = this.open ? 'visible' : 'hidden';
       this.body.style.height = this.open ? 'auto' : '0';
       this.open ? this.slAfterShow.emit() : this.slAfterHide.emit();
+      this.body.hidden = !this.open;
     }
   }