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

do not show overlay when _showOverlayCondition is "false" (#2421)

Browse source 
fix: show overlay based on subclassers' _showOverlayCondition
This commit is contained in:
Oleksii Kadurin 2024-12-12 17:03:30 +01:00 committed by GitHub
parent 67f5735538
commit e11788492f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 67 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/weak-hairs-jump.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
show overlay based on overridden "\_showOverlayCondition"

8
packages/ui/components/combobox/src/LionCombobox.js
View file

@ -663,7 +663,11 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
) {
return false;
}
if (this.filled || this.showAllOnEmpty) {
if (
this.filled ||
this.showAllOnEmpty ||
(!this.filled && this.multipleChoice && this.__prevCboxValueNonSelected)
) {
return true;
}
// when no keyboard action involved (on focused change), return current opened state
@ -705,7 +709,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
// eslint-disable-next-line no-unused-vars
_textboxOnInput(ev) {
this.__shouldAutocompleteNextUpdate = true;
this.opened = true;
this.opened = this._showOverlayCondition({});
}
/**

59
packages/ui/components/combobox/test/lion-combobox.test.js
View file

@ -931,6 +931,50 @@ describe('lion-combobox', () => {
expect(el.opened).to.equal(false);
});
it('does not flash the menu when _showOverlayCondition returns "false"', async () => {
class ComplexCombobox extends LionCombobox {
_showOverlayCondition() {
return false;
}
}
const tagName = defineCE(ComplexCombobox);
const tag = unsafeStatic(tagName);
const el = /** @type {LionCombobox} */ (
await fixture(html`
<${tag} name="combo" label="Display only the label once selected">
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue="${'Chard'}">Chard</lion-option>
<lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
<lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
</${tag}>
`)
);
const dialog = el.shadowRoot?.querySelector('dialog');
/**
* hasDropdownFlashed is `true` if the menu was shown for a short period of time and then got closed
*/
let hasDropdownFlashed = false;
const observer = new MutationObserver(mutationList => {
// eslint-disable-next-line no-unused-vars
for (const mutation of mutationList) {
if (dialog?.style.display === '') {
hasDropdownFlashed = true;
}
}
});
observer.observe(/** @type {Node} */ (dialog), { attributeFilter: ['style'] });
const { _inputNode } = getComboboxMembers(el);
_inputNode.focus();
await sendKeys({
type: 'art',
});
expect(hasDropdownFlashed).to.be.false;
});
it('shows overlay on click when filled', async () => {
const el = /** @type {LionCombobox} */ (
await fixture(html`
@ -1157,7 +1201,10 @@ describe('lion-combobox', () => {
class ShowOverlayConditionCombobox extends LionCombobox {
/** @param {{ currentValue: string, lastKey:string }} options */
_showOverlayCondition(options) {
return options.currentValue.length > 3 && super._showOverlayCondition(options);
return (
// @ts-ignore
this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
);
}
}
const tagName = defineCE(ShowOverlayConditionCombobox);
@ -1182,7 +1229,10 @@ describe('lion-combobox', () => {
class ShowOverlayConditionCombobox extends LionCombobox {
/** @param {{ currentValue: string, lastKey:string }} options */
_showOverlayCondition(options) {
return options.currentValue.length > 3 && super._showOverlayCondition(options);
return (
// @ts-ignore
this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
);
}
}
const tagName = defineCE(ShowOverlayConditionCombobox);
@ -1207,7 +1257,10 @@ describe('lion-combobox', () => {
class ShowOverlayConditionCombobox extends LionCombobox {
/** @param {{ currentValue: string, lastKey:string }} options */
_showOverlayCondition(options) {
return options.currentValue.length > 3 && super._showOverlayCondition(options);
return (
// @ts-ignore
this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
);
}
}
const tagName = defineCE(ShowOverlayConditionCombobox);