From c61be3a8440b378914eac0bc90602aa5ae5e9c24 Mon Sep 17 00:00:00 2001 From: qa46hx Date: Mon, 7 Dec 2020 16:14:35 +0100 Subject: [PATCH 1/2] fix(overlays): get the precise referenceNode width --- packages/overlays/src/OverlayController.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/overlays/src/OverlayController.js b/packages/overlays/src/OverlayController.js index 2fb72cbbc..9037dc6b4 100644 --- a/packages/overlays/src/OverlayController.js +++ b/packages/overlays/src/OverlayController.js @@ -1098,8 +1098,7 @@ export class OverlayController extends EventTargetShim { if (!this._referenceNode || this.placementMode === 'global') { return; } - - const referenceWidth = `${this._referenceNode.clientWidth}px`; + const referenceWidth = `${this._referenceNode.getBoundingClientRect().width}px`; switch (this.inheritsReferenceWidth) { case 'max': this.contentWrapperNode.style.maxWidth = referenceWidth; From ad2f90f43da1db8b20557a94dd538ac7be84d1a5 Mon Sep 17 00:00:00 2001 From: qa46hx Date: Mon, 7 Dec 2020 16:18:08 +0100 Subject: [PATCH 2/2] fix(select-rich): set invoker width same as content width --- .changeset/brave-beans-hang.md | 5 ++++ packages/select-rich/README.md | 12 +++++---- packages/select-rich/src/LionSelectInvoker.js | 4 +++ packages/select-rich/src/LionSelectRich.js | 26 +++++++++++++++++++ .../select-rich/test/lion-select-rich.test.js | 25 ++++++++++++++++++ 5 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 .changeset/brave-beans-hang.md diff --git a/.changeset/brave-beans-hang.md b/.changeset/brave-beans-hang.md new file mode 100644 index 000000000..a35c86ca8 --- /dev/null +++ b/.changeset/brave-beans-hang.md @@ -0,0 +1,5 @@ +--- +'@lion/select-rich': patch +--- + +set invoker width same as content width diff --git a/packages/select-rich/README.md b/packages/select-rich/README.md index 128afb53d..1f69b6f43 100644 --- a/packages/select-rich/README.md +++ b/packages/select-rich/README.md @@ -343,7 +343,7 @@ class SingleOptionRemoveAdd extends LitElement { constructor() { super(); - this.options = ['Option 1']; + this.options = ['Option 1', 'Option 2']; } render() { @@ -361,15 +361,17 @@ class SingleOptionRemoveAdd extends LitElement { } addOption() { - this.options.push(`Option ${this.options.length + 1}`); + this.options.push(`Option ${this.options.length + 1} with a long title`); this.options = [...this.options]; this.requestUpdate(); } removeOption() { - this.options.pop(); - this.options = [...this.options]; - this.requestUpdate(); + if (this.options.length >= 2) { + this.options.pop(); + this.options = [...this.options]; + this.requestUpdate(); + } } } diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js index 111231fa7..6987f27a5 100644 --- a/packages/select-rich/src/LionSelectInvoker.js +++ b/packages/select-rich/src/LionSelectInvoker.js @@ -15,6 +15,10 @@ export class LionSelectInvoker extends LionButton { return [ super.styles, css` + :host { + justify-content: space-between; + } + #content-wrapper { position: relative; } diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index eb7e4dc67..83e0b1624 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/packages/select-rich/src/LionSelectRich.js @@ -112,6 +112,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L this.interactionMode = 'auto'; this.singleOption = false; + this._arrowWidth = 28; this.__onKeyUp = this.__onKeyUp.bind(this); this.__invokerOnBlur = this.__invokerOnBlur.bind(this); @@ -217,6 +218,8 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L /* eslint-enable no-param-reassign */ this.__hasInitialSelectedFormElement = true; } + this._alignInvokerWidth(); + this._onFormElementsChanged(); } @@ -226,6 +229,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L */ removeFormElement(child) { super.removeFormElement(child); + this._alignInvokerWidth(); this._onFormElementsChanged(); } @@ -352,6 +356,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L _setupOverlayCtrl() { super._setupOverlayCtrl(); this._initialInheritsReferenceWidth = this._overlayCtrl.inheritsReferenceWidth; + this._alignInvokerWidth(); this._overlayCtrl.addEventListener('before-show', this.__overlayBeforeShow); this._overlayCtrl.addEventListener('show', this.__overlayOnShow); @@ -369,6 +374,27 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide); } + /** + * Align invoker width with content width + * Make sure display is not set to "none" while calculating the content width + */ + async _alignInvokerWidth() { + if (this._overlayCtrl && this._overlayCtrl.content) { + await this.updateComplete; + const initContentDisplay = this._overlayCtrl.content.style.display; + const initContentMinWidth = this._overlayCtrl.content.style.minWidth; + const initContentWidth = this._overlayCtrl.content.style.width; + this._overlayCtrl.content.style.display = ''; + 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`; + this._overlayCtrl.content.style.display = initContentDisplay; + this._overlayCtrl.content.style.minWidth = initContentMinWidth; + this._overlayCtrl.content.style.width = initContentWidth; + } + } + /** * @configure FormControlMixin */ diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index e6b9cd0dd..45db525ba 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -189,6 +189,31 @@ describe('lion-select-rich', () => { // @ts-ignore allow protected access in tests expect(el._invokerNode.shadowRoot.firstElementChild.textContent).to.equal('30'); }); + + it('inherits the content width including arrow width', async () => { + const el = /** @type {LionSelectRich} */ (await fixture(html` + + Item 1 + Item 2 with long label + + `)); + el.opened = true; + const options = el.formElements; + await el.updateComplete; + expect(el._invokerNode.clientWidth).to.equal(options[1].clientWidth); + + const newOption = /** @type {LionOption} */ (document.createElement('lion-option')); + newOption.choiceValue = 30; + newOption.textContent = '30 with longer label'; + + el._inputNode.appendChild(newOption); + await el.updateComplete; + expect(el._invokerNode.clientWidth).to.equal(options[2].clientWidth); + + el._inputNode.removeChild(newOption); + await el.updateComplete; + expect(el._invokerNode.clientWidth).to.equal(options[1].clientWidth); + }); }); describe('overlay', () => {