diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index c90547b6..cae35557 100644 --- a/docs/pages/resources/changelog.md +++ b/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 `` and `` where the `size` attribute wasn't being reflected [#1318](https://github.com/shoelace-style/shoelace/issues/1348) - Fixed a bug in `` where `` would not get checked if `` was defined first. [#1364](https://github.com/shoelace-style/shoelace/pull/1364/) - Fixed a bug in `` 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 `` that sometimes caused dual scrollbars in containers that overflowed [#1380](https://github.com/shoelace-style/shoelace/issues/1380) - Improved `` 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 `` by partially rendering unseen icons [#1310](https://github.com/shoelace-style/shoelace/pull/1310) diff --git a/src/components/radio-group/radio-group.styles.ts b/src/components/radio-group/radio-group.styles.ts index 00be7987..4b58e058 100644 --- a/src/components/radio-group/radio-group.styles.ts +++ b/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; diff --git a/src/components/radio-group/radio-group.test.ts b/src/components/radio-group/radio-group.test.ts index fe507512..e11cd502 100644 --- a/src/components/radio-group/radio-group.test.ts +++ b/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(html` + + + + `); + + 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