fixes #1380

docs/pages/resources/changelog.md

@@ -31,6 +31,7 @@ If you're a CDN user, you must update your path to point to `cdn/` instead of `d
 - Fixed a bug in `<sl-select>` and `<sl-color-picker>` where the `size` attribute wasn't being reflected [#1318](https://github.com/shoelace-style/shoelace/issues/1348)
 - Fixed a bug in `<sl-radio-group>` where `<sl-radio>` would not get checked if `<sl-radio-group>` was defined first. [#1364](https://github.com/shoelace-style/shoelace/pull/1364/)
 - Fixed a bug in `<sl-input>` that caused date pickers to look filled in even when empty in Safari [#1341](https://github.com/shoelace-style/shoelace/pull/1341)
+- Fixed a bug in `<sl-radio-group>` that sometimes caused dual scrollbars in containers that overflowed [#1380](https://github.com/shoelace-style/shoelace/issues/1380)
 - Improved `<sl-button>` so it can accept children of variable heights [#1317](https://github.com/shoelace-style/shoelace/pull/1317)
 - Improved the docs to more clearly explain sizing radios and radio buttons
 - Improved the performance of `<sl-rating>` by partially rendering unseen icons [#1310](https://github.com/shoelace-style/shoelace/pull/1310)

src/components/radio-group/radio-group.styles.ts

@@ -11,6 +11,7 @@ export default css`
   }
 
   .form-control {
+    position: relative;
     border: none;
     padding: 0;
     margin: 0;

src/components/radio-group/radio-group.test.ts

@@ -366,6 +366,23 @@ describe('when the value changes', () => {
     await radioGroup.updateComplete;
   });
 
+  it('should relatively position content to prevent visually hidden scroll bugs', async () => {
+    //
+    // See https://github.com/shoelace-style/shoelace/issues/1380
+    //
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group value="1">
+        <sl-radio id="radio-1" value="1"></sl-radio>
+      </sl-radio-group>
+    `);
+
+    const formControl = radioGroup.shadowRoot!.querySelector('.form-control')!;
+    const visuallyHidden = radioGroup.shadowRoot!.querySelector('.visually-hidden')!;
+
+    expect(getComputedStyle(formControl).position).to.equal('relative');
+    expect(getComputedStyle(visuallyHidden).position).to.equal('absolute');
+  });
+
   /**
    * @see https://github.com/shoelace-style/shoelace/issues/1361
    * This isn't really possible to test right now due to importing "shoelace.js" which