diff --git a/app/assets/javascripts/discourse/templates/components/d-editor.hbs b/app/assets/javascripts/discourse/templates/components/d-editor.hbs
index be1f2d50dad..61e771652ea 100644
--- a/app/assets/javascripts/discourse/templates/components/d-editor.hbs
+++ b/app/assets/javascripts/discourse/templates/components/d-editor.hbs
@@ -15,7 +15,7 @@
         {{#each group.buttons as |b|}}
           {{#if b.popupMenu}}
             {{toolbar-popup-menu-options
-              onPopupMenuAction=onPopupMenuAction
+              onSelect=onPopupMenuAction
               onExpand=(action b.action b)
               title=b.title
               headerIcon=b.icon
diff --git a/app/assets/javascripts/select-kit/components/single-select.js.es6 b/app/assets/javascripts/select-kit/components/single-select.js.es6
index 7713d51194b..af3aa3a4f8d 100644
--- a/app/assets/javascripts/select-kit/components/single-select.js.es6
+++ b/app/assets/javascripts/select-kit/components/single-select.js.es6
@@ -210,6 +210,10 @@ export default SelectKitComponent.extend({
   },
 
   select(computedContentItem) {
+    if (this.get("hasSelection")) {
+      this.deselect(this.get("selection.value"));
+    }
+
     if (
       !computedContentItem ||
       computedContentItem.__sk_row_type === "noneRow"
diff --git a/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6 b/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6
index 770162e88ed..39d8348119d 100644
--- a/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6
+++ b/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6
@@ -12,10 +12,7 @@ export default DropdownSelectBoxComponent.extend({
     return `<h3>${title}</h3>`;
   },
 
-  mutateValue(value) {
-    this.sendAction("onPopupMenuAction", value);
-    this.setProperties({ value: null, highlighted: null });
-  },
+  autoHighlight() {},
 
   computeContent(content) {
     return content
diff --git a/test/javascripts/acceptance/composer-test.js.es6 b/test/javascripts/acceptance/composer-test.js.es6
index ef25782bc61..b73e9f6c62e 100644
--- a/test/javascripts/acceptance/composer-test.js.es6
+++ b/test/javascripts/acceptance/composer-test.js.es6
@@ -289,6 +289,35 @@ QUnit.test("Composer can toggle between edit and reply", async assert => {
   );
 });
 
+QUnit.test("Composer can toggle whispers", async assert => {
+  await visit("/t/this-is-a-test-topic/9");
+  await click(".topic-post:eq(0) button.reply");
+
+  await selectKit(".toolbar-popup-menu-options").expand();
+  await selectKit(".toolbar-popup-menu-options").selectRowByValue(
+    "toggleWhisper"
+  );
+
+  assert.ok(
+    find(".composer-fields .whisper")
+      .text()
+      .indexOf(I18n.t("composer.whisper")) > 0,
+    "it sets the post type to whisper"
+  );
+
+  await selectKit(".toolbar-popup-menu-options").expand();
+  await selectKit(".toolbar-popup-menu-options").selectRowByValue(
+    "toggleWhisper"
+  );
+
+  assert.ok(
+    find(".composer-fields .whisper")
+      .text()
+      .indexOf(I18n.t("composer.whisper")) <= 0,
+    "it removes the whisper mode"
+  );
+});
+
 QUnit.test(
   "Composer can toggle between reply and createTopic",
   async assert => {
diff --git a/test/javascripts/components/single-select-test.js.es6 b/test/javascripts/components/single-select-test.js.es6
index 439781e202e..72366fdf72e 100644
--- a/test/javascripts/components/single-select-test.js.es6
+++ b/test/javascripts/components/single-select-test.js.es6
@@ -835,3 +835,55 @@ componentTest("without forceEscape", {
     );
   }
 });
+
+componentTest("onSelect", {
+  template:
+    "<div class='test-external-action'></div>{{single-select content=content onSelect=(action externalAction)}}",
+
+  beforeEach() {
+    this.set("externalAction", actual => {
+      find(".test-external-action").text(actual);
+    });
+
+    this.set("content", ["red", "blue"]);
+  },
+
+  async test(assert) {
+    await this.get("subject").expand();
+    await this.get("subject").selectRowByValue("red");
+
+    assert.equal(
+      find(".test-external-action")
+        .text()
+        .trim(),
+      "red"
+    );
+  }
+});
+
+componentTest("onDeselect", {
+  template:
+    "<div class='test-external-action'></div>{{single-select content=content onDeselect=(action externalAction)}}",
+
+  beforeEach() {
+    this.set("externalAction", actual => {
+      find(".test-external-action").text(actual);
+    });
+
+    this.set("content", ["red", "blue"]);
+  },
+
+  async test(assert) {
+    await this.get("subject").expand();
+    await this.get("subject").selectRowByValue("red");
+    await this.get("subject").expand();
+    await this.get("subject").selectRowByValue("blue");
+
+    assert.equal(
+      find(".test-external-action")
+        .text()
+        .trim(),
+      "red"
+    );
+  }
+});