diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 143af116..d9e14c64 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -24,6 +24,9 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` that prevented it from closing when tabbing to another select inside a shadow root [#1763] - Fixed a bug in `` that caused the animation to appear strange in certain circumstances [#1787] - Fixed a bug that caused form controls to submit even after they were removed from the DOM [#1823] +- Fixed a bug that caused empty `` elements to log an error in the console [#1795] +- Fixed a bug that caused modal scroll locking to conflict with the `scrollbar-gutter` property [#1805] +- Fixed a bug in `` that caused slotted content to show up when calling `getTextLabel()` [#1730] - Improved the accessibility of `` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734] ## 2.12.0 diff --git a/src/components/option/option.component.ts b/src/components/option/option.component.ts index d92ba406..142e2628 100644 --- a/src/components/option/option.component.ts +++ b/src/components/option/option.component.ts @@ -106,7 +106,22 @@ export default class SlOption extends ShoelaceElement { /** Returns a plain text label based on the option's content. */ getTextLabel() { - return (this.textContent ?? '').trim(); + const nodes = this.childNodes; + let label = ''; + + [...nodes].forEach(node => { + if (node.nodeType === Node.ELEMENT_NODE) { + if (!(node as HTMLElement).hasAttribute('slot')) { + label += (node as HTMLElement).outerHTML; + } + } + + if (node.nodeType === Node.TEXT_NODE) { + label += node.textContent; + } + }); + + return label.trim(); } render() { diff --git a/src/components/radio-group/radio-group.component.ts b/src/components/radio-group/radio-group.component.ts index 11210183..f97426ca 100644 --- a/src/components/radio-group/radio-group.component.ts +++ b/src/components/radio-group/radio-group.component.ts @@ -218,7 +218,7 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'sl-radio-button'); - if (!radios.some(radio => radio.checked)) { + if (radios.length > 0 && !radios.some(radio => radio.checked)) { if (this.hasButtonGroup) { const buttonRadio = radios[0].shadowRoot?.querySelector('button'); diff --git a/src/themes/_utility.css b/src/themes/_utility.css index eab96834..4d383d3d 100644 --- a/src/themes/_utility.css +++ b/src/themes/_utility.css @@ -4,9 +4,18 @@ * to reduce the possibility of collisions. */ -.sl-scroll-lock { - padding-right: var(--sl-scroll-lock-size) !important; - overflow: hidden !important; +@supports (scrollbar-gutter: stable) { + .sl-scroll-lock { + scrollbar-gutter: stable !important; + overflow: hidden !important; + } +} + +@supports not (scrollbar-gutter: stable) { + .sl-scroll-lock { + padding-right: var(--sl-scroll-lock-size) !important; + overflow: hidden !important; + } } .sl-toast-stack {