ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(select-rich): add workaround invoker width when inside overlay

Browse source
This commit is contained in:
qa46hx 2020-12-24 10:42:44 +01:00
parent 679d189ec4
commit 9b9db3dde4
3 changed files with 14 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/angry-snails-repeat.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/select-rich': patch
---
add workarround and todo for align select-rich invoker width with options if its inside an overlay

1
packages/select-rich/src/LionSelectInvoker.js
View file

@ -21,6 +21,7 @@ export class LionSelectInvoker extends LionButton {
#content-wrapper {
position: relative;
pointer-events: none;
}
`,
];

9
packages/select-rich/src/LionSelectRich.js
View file

@ -388,7 +388,14 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
this._overlayCtrl.content.style.minWidth = 'auto';
this._overlayCtrl.content.style.width = 'auto';
const contentWidth = this._overlayCtrl.content.getBoundingClientRect().width;
this._invokerNode.style.width = `${contentWidth + this._arrowWidth}px`;
/**
* TODO when inside an overlay the current solution doesn't work.
* Since that dialog is still hidden, open and close the select-rich
* doesn't have any effect so the contentWidth returns 0
*/
if (contentWidth > 0) {
this._invokerNode.style.width = `${contentWidth + this._arrowWidth}px`;
}
this._overlayCtrl.content.style.display = initContentDisplay;
this._overlayCtrl.content.style.minWidth = initContentMinWidth;
this._overlayCtrl.content.style.width = initContentWidth;