UX: closes multi-select on selection when maximum=1 (#15092)

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

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);
           }