From fd09f652d450580d7ad43d2c4466cb4ed42d30f0 Mon Sep 17 00:00:00 2001
From: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
Date: Thu, 29 Dec 2022 10:37:40 +0100
Subject: [PATCH] fix(select-rich): solve case of having singleOption and
 hassNoDefaultSelected at the same time (#1863)

---
 .changeset/chilly-taxis-sin.md                      |  5 +++++
 packages/ui/components/listbox/src/ListboxMixin.js  |  4 ----
 .../components/listbox/types/ListboxMixinTypes.ts   |  5 +----
 .../ui/components/select-rich/src/LionSelectRich.js |  2 +-
 .../select-rich/test/lion-select-rich.test.js       | 13 +++++++++++++
 5 files changed, 20 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/chilly-taxis-sin.md

diff --git a/.changeset/chilly-taxis-sin.md b/.changeset/chilly-taxis-sin.md
new file mode 100644
index 000000000..bed13de75
--- /dev/null
+++ b/.changeset/chilly-taxis-sin.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[select-rich] solve case of having singleOption and hasNoDefaultSelected as the same time
diff --git a/packages/ui/components/listbox/src/ListboxMixin.js b/packages/ui/components/listbox/src/ListboxMixin.js
index 084b47ac6..9ac4f8eac 100644
--- a/packages/ui/components/listbox/src/ListboxMixin.js
+++ b/packages/ui/components/listbox/src/ListboxMixin.js
@@ -384,10 +384,6 @@ const ListboxMixinImplementation = superclass =>
     updated(changedProperties) {
       super.updated(changedProperties);
 
-      if (this.formElements.length === 1) {
-        this.singleOption = true;
-      }
-
       if (changedProperties.has('disabled')) {
         if (this.disabled) {
           this.__requestOptionsToBeDisabled();
diff --git a/packages/ui/components/listbox/types/ListboxMixinTypes.ts b/packages/ui/components/listbox/types/ListboxMixinTypes.ts
index 7cc3bcb15..43c635c6c 100644
--- a/packages/ui/components/listbox/types/ListboxMixinTypes.ts
+++ b/packages/ui/components/listbox/types/ListboxMixinTypes.ts
@@ -11,7 +11,7 @@ import { LionOption } from '../src/LionOption.js';
 export declare class ListboxHost {
   static get styles(): CSSResultArray;
   /**
-   * When true, will synchronize activedescendant and selected element on
+   * When true, will synchronize active descendant and selected element on
    * arrow key navigation.
    * This behavior can usually be seen on <select> on the Windows platform.
    * Note that this behavior cannot be used when multiple-choice is true.
@@ -31,9 +31,6 @@ export declare class ListboxHost {
 
   public hasNoDefaultSelected: boolean;
 
-  public singleOption: boolean;
-  // protected _invokerNode: HTMLElement;
-
   public checkedIndex: number | number[];
 
   public activeIndex: number;
diff --git a/packages/ui/components/select-rich/src/LionSelectRich.js b/packages/ui/components/select-rich/src/LionSelectRich.js
index 9ead08682..7a7722fdb 100644
--- a/packages/ui/components/select-rich/src/LionSelectRich.js
+++ b/packages/ui/components/select-rich/src/LionSelectRich.js
@@ -259,7 +259,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
 
   /** @protected */
   _onFormElementsChanged() {
-    this.singleOption = this.formElements.length === 1;
+    this.singleOption = this.formElements.length === 1 && !this.hasNoDefaultSelected;
     this._invokerNode.singleOption = this.singleOption;
   }
 
diff --git a/packages/ui/components/select-rich/test/lion-select-rich.test.js b/packages/ui/components/select-rich/test/lion-select-rich.test.js
index 50e83e222..c57c58f3f 100644
--- a/packages/ui/components/select-rich/test/lion-select-rich.test.js
+++ b/packages/ui/components/select-rich/test/lion-select-rich.test.js
@@ -400,6 +400,19 @@ describe('lion-select-rich', () => {
       expect(el.singleOption).to.be.false;
       expect(_invokerNode.singleOption).to.be.false;
     });
+
+    it('should have singleOption only if one option and no hasNoDefaultSelected', async () => {
+      const el = await fixture(html`
+        <lion-select-rich has-no-default-selected>
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+        </lion-select-rich>
+      `);
+
+      const { _invokerNode } = getSelectRichMembers(el);
+
+      expect(el.singleOption).to.be.false;
+      expect(_invokerNode.singleOption).to.be.false;
+    });
   });
 
   describe('interaction-mode', () => {