diff --git a/.changeset/weak-hairs-jump.md b/.changeset/weak-hairs-jump.md
new file mode 100644
index 000000000..63ad1e9f5
--- /dev/null
+++ b/.changeset/weak-hairs-jump.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+show overlay based on overridden "\_showOverlayCondition"
diff --git a/packages/ui/components/combobox/src/LionCombobox.js b/packages/ui/components/combobox/src/LionCombobox.js
index 20e145493..744e2e106 100644
--- a/packages/ui/components/combobox/src/LionCombobox.js
+++ b/packages/ui/components/combobox/src/LionCombobox.js
@@ -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({});
}
/**
diff --git a/packages/ui/components/combobox/test/lion-combobox.test.js b/packages/ui/components/combobox/test/lion-combobox.test.js
index 2a94f8636..410d5e929 100644
--- a/packages/ui/components/combobox/test/lion-combobox.test.js
+++ b/packages/ui/components/combobox/test/lion-combobox.test.js
@@ -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">
+ Artichoke
+ Chard
+ Chicory
+ Victoria Plum
+ ${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);