From 3dc0b9e077546ee51b652a3f72ea46c153a40147 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 29 Nov 2021 14:29:11 +0100
Subject: [PATCH] UX: closes multi-select on selection when maximum=1 (#15092)

---
 .../select-kit/multi-select-test.js           | 72 +++++++++++++++++++
 .../select-kit/addon/components/select-kit.js |  5 +-
 2 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/multi-select-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/multi-select-test.js
index 83520188571..131a5f65a40 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/multi-select-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/multi-select-test.js
@@ -67,3 +67,75 @@ discourseModule(
     });
   }
 );
+
+discourseModule(
+  "Integration | Component | select-kit/multi-select | maximum=1",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    hooks.beforeEach(function () {
+      this.set("subject", selectKit());
+    });
+
+    componentTest("content", {
+      template: hbs`
+      {{multi-select
+        value=value
+        content=content
+        options=(hash maximum=1)
+      }}
+    `,
+
+      beforeEach() {
+        setDefaultState(this);
+      },
+
+      async test(assert) {
+        await this.subject.expand();
+        await this.subject.selectRowByValue(1);
+
+        assert.notOk(this.subject.isExpanded(), "it closes the dropdown");
+
+        await this.subject.expand();
+        await this.subject.deselectItemByValue(1);
+
+        assert.ok(
+          this.subject.isExpanded(),
+          "it doesn’t close the dropdown when no selection has been made"
+        );
+      },
+    });
+  }
+);
+
+discourseModule(
+  "Integration | Component | select-kit/multi-select | maximum=2",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    hooks.beforeEach(function () {
+      this.set("subject", selectKit());
+    });
+
+    componentTest("content", {
+      template: hbs`
+      {{multi-select
+        value=value
+        content=content
+        options=(hash maximum=2)
+      }}
+    `,
+
+      beforeEach() {
+        setDefaultState(this);
+      },
+
+      async test(assert) {
+        await this.subject.expand();
+        await this.subject.selectRowByValue(1);
+
+        assert.ok(this.subject.isExpanded(), "it doesn’t close the dropdown");
+      },
+    });
+  }
+);
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js
index a32e864b33c..8aca155af80 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit.js
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit.js
@@ -444,7 +444,10 @@ export default Component.extend(
         resolve(items);
       }).finally(() => {
         if (!this.isDestroying && !this.isDestroyed) {
-          if (this.selectKit.options.closeOnChange) {
+          if (
+            this.selectKit.options.closeOnChange ||
+            (isPresent(value) && this.selectKit.options.maximum === 1)
+          ) {
             this.selectKit.close(event);
           }