Skip to content

Commit

Permalink
Fix: split panel properly recalculates when going from hidden to shown (
Browse files Browse the repository at this point in the history
#1942)

* fix: split-panel now properly calculates it size when it goes from hidden to being shown.

* chore: add changelog note

* prettier
  • Loading branch information
KonnorRogers committed Apr 11, 2024
1 parent a427433 commit 16d5575
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 1 deletion.
3 changes: 2 additions & 1 deletion docs/pages/resources/changelog.md
Expand Up @@ -14,7 +14,8 @@ New versions of Shoelace are released as-needed and generally occur when a criti

## Next

- Fixed a bug in `<dialog>` where when it showed it would create a layout shift. [#1967]
- Fixed a bug in `<sl-split-panel>` 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 `<dialog>` where when it showed it would cause a layout shift. [#1967]
- Fixed a bug in `<sl-tooltip>` that allowed unwanted text properties to leak in [#1947]

## 2.15.0
Expand Down
8 changes: 8 additions & 0 deletions src/components/split-panel/split-panel.component.ts
Expand Up @@ -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);
Expand Down

0 comments on commit 16d5575

Please sign in to comment.