diff --git a/packages/overlays/src/OverlayController.js b/packages/overlays/src/OverlayController.js index bdc9b74c8..a7a6f3afb 100644 --- a/packages/overlays/src/OverlayController.js +++ b/packages/overlays/src/OverlayController.js @@ -591,6 +591,7 @@ export class OverlayController { break; case 'min': this._contentNodeWrapper.style.minWidth = referenceWidth; + this._contentNodeWrapper.style.width = 'auto'; break; /* no default */ } diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index 1ec984d95..36eac1b2b 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/packages/select-rich/src/LionSelectRich.js @@ -635,13 +635,34 @@ export class LionSelectRich extends ScopedElementsMixin( }; } + /** + * With no selected element, we should override the inheritsReferenceWidth in most cases. + * By default, we will set it to 'min', and then set it back to what it was initially when + * something is selected. + * As a subclasser you can override this behavior. + */ + _noDefaultSelectedInheritsWidth() { + if (this.checkedIndex === -1) { + this._overlayCtrl.inheritsReferenceWidth = 'min'; + } else { + this._overlayCtrl.inheritsReferenceWidth = this._initialInheritsReferenceWidth; + } + } + __setupOverlay() { + this._initialInheritsReferenceWidth = this._overlayCtrl.inheritsReferenceWidth; + this.__overlayBeforeShow = () => { + if (this.hasNoDefaultSelected) { + this._noDefaultSelectedInheritsWidth(); + } + }; this.__overlayOnShow = () => { if (this.checkedIndex != null) { this.activeIndex = this.checkedIndex; } this._listboxNode.focus(); }; + this._overlayCtrl.addEventListener('before-show', this.__overlayBeforeShow); this._overlayCtrl.addEventListener('show', this.__overlayOnShow); this.__overlayOnHide = () => { @@ -655,6 +676,7 @@ export class LionSelectRich extends ScopedElementsMixin( __teardownOverlay() { this._overlayCtrl.removeEventListener('show', this.__overlayOnShow); + this._overlayCtrl.removeEventListener('before-show', this.__overlayBeforeShow); this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide); this._scrollTargetNode.removeEventListener('keydown', this.__overlayOnHide); } diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index 7cb648022..a57694c58 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -378,6 +378,32 @@ describe('lion-select-rich', () => { await elDisabled.updateComplete; expect(elDisabled.opened).to.be.false; }); + + it('should override the inheritsWidth prop when no default selected feature is used', async () => { + const el = await fixture(html` + + + Red + Hotpink + Teal + + + `); + + expect(el._overlayCtrl.inheritsReferenceWidth).to.equal('full'); + el.opened = true; + await el.updateComplete; + expect(el._overlayCtrl.inheritsReferenceWidth).to.equal('min'); + + // Emulate selecting hotpink, it closing, and opening it again + el.modelValue = 'hotpink'; + el.opened = false; + await el.updateComplete; // necessary for overlay controller to actually close and re-open + el.opened = true; + await el.updateComplete; + + expect(el._overlayCtrl.inheritsReferenceWidth).to.equal('full'); + }); }); describe('interaction-mode', () => {