From e11788492ff4c55c83bc151ff55542b4a39a4baf Mon Sep 17 00:00:00 2001
From: Oleksii Kadurin <ovkadurin@gmail.com>
Date: Thu, 12 Dec 2024 17:03:30 +0100
Subject: [PATCH] do not show overlay when _showOverlayCondition is "false"
 (#2421)

fix: show overlay based on subclassers' _showOverlayCondition
---
 .changeset/weak-hairs-jump.md                 |  5 ++
 .../components/combobox/src/LionCombobox.js   |  8 ++-
 .../combobox/test/lion-combobox.test.js       | 59 ++++++++++++++++++-
 3 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/weak-hairs-jump.md

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">
+            <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);