Merge pull request #1131 from ing-bank/fix/select-rich-width

Fix/select rich width

.changeset/brave-beans-hang.md

@@ -0,0 +1,5 @@
+---
+'@lion/select-rich': patch
+---
+
+set invoker width same as content width

packages/overlays/src/OverlayController.js

@@ -1103,8 +1103,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;

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();
+    }
   }
 }
 

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;
         }

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
    */

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`
+        <lion-select-rich>
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+          <lion-option .choiceValue=${10}>Item 2 with long label</lion-option>
+        </lion-select-rich>
+      `));
+      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', () => {