From 16d5575307f76cb4c77822dc2b91f45e8a40897e Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Thu, 11 Apr 2024 14:09:56 -0400 Subject: [PATCH] Fix: split panel properly recalculates when going from hidden to shown (#1942) * fix: split-panel now properly calculates it size when it goes from hidden to being shown. * chore: add changelog note * prettier --- docs/pages/resources/changelog.md | 3 ++- src/components/split-panel/split-panel.component.ts | 8 ++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 1a507b01..ff1f2f02 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 2154e772..bf8af30d 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);