diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 1a507b01e5..ff1f2f0252 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -14,7 +14,8 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next -- Fixed a bug in `` where when it showed it would create a layout shift. [#1967] +- Fixed a bug in `` that caused it not to recalculate it's position when going from being `display: none;` to its original display value. [#1942] +- Fixed a bug in `` where when it showed it would cause a layout shift. [#1967] - Fixed a bug in `` that allowed unwanted text properties to leak in [#1947] ## 2.15.0 diff --git a/src/components/split-panel/split-panel.component.ts b/src/components/split-panel/split-panel.component.ts index 2154e7721f..bf8af30dfa 100644 --- a/src/components/split-panel/split-panel.component.ts +++ b/src/components/split-panel/split-panel.component.ts @@ -189,6 +189,14 @@ export default class SlSplitPanel extends ShoelaceElement { const { width, height } = entries[0].contentRect; this.size = this.vertical ? height : width; + // There's some weird logic that gets `this.cachedPositionInPixels = NaN` or `this.position === Infinity` when + // a split-panel goes from `display: none;` to showing. + if (isNaN(this.cachedPositionInPixels) || this.position === Infinity) { + this.cachedPositionInPixels = Number(this.getAttribute('position-in-pixels')); + this.positionInPixels = Number(this.getAttribute('position-in-pixels')); + this.position = this.pixelsToPercentage(this.positionInPixels); + } + // Resize when a primary panel is set if (this.primary) { this.position = this.pixelsToPercentage(this.cachedPositionInPixels);