fix(select-rich): consider no default select for inheritsReferenceWidth

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

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

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`
+        <lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected>
+          <lion-options slot="input">
+            <lion-option .choiceValue=${'red'}>Red</lion-option>
+            <lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
+            <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+          </lion-options>
+        </lion-select-rich>
+      `);
+
+      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', () => {