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

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

Browse source
This commit is contained in:
Joren Broekema 2020-03-26 13:50:27 +01:00
parent 975a01aca9
commit e636ce1f9c
3 changed files with 49 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/overlays/src/OverlayController.js
View file

@ -591,6 +591,7 @@ export class OverlayController {
break;
case 'min':
this._contentNodeWrapper.style.minWidth = referenceWidth;
this._contentNodeWrapper.style.width = 'auto';
break;
/* no default */
}

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

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

26
packages/select-rich/test/lion-select-rich.test.js
View file

@ -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', () => {