diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6
index 030e6742af7..e1db38b68fd 100644
--- a/app/assets/javascripts/discourse/components/composer-editor.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-editor.js.es6
@@ -366,37 +366,41 @@ export default Ember.Component.extend({
       this._resetUpload(true);
     },
 
-    showOptions(toolbarEvent) {
-      // long term we want some smart positioning algorithm in popup-menu
-      // the problem is that positioning in a fixed panel is a nightmare
-      // cause offsetParent can end up returning a fixed element and then
-      // using offset() is not going to work, so you end up needing special logic
-      // especially since we allow for negative .top, provided there is room on screen
-      const myPos = this.$().position();
-      const buttonPos = this.$('.options').position();
+    toggleOptions(toolbarEvent) {
+      if (this.get('optionsVisible')) {
+        this.sendAction('hideOptions');
+      } else {
+        // long term we want some smart positioning algorithm in popup-menu
+        // the problem is that positioning in a fixed panel is a nightmare
+        // cause offsetParent can end up returning a fixed element and then
+        // using offset() is not going to work, so you end up needing special logic
+        // especially since we allow for negative .top, provided there is room on screen
+        const myPos = this.$().position();
+        const buttonPos = this.$('.options').position();
 
-      const popupHeight = $('#reply-control .popup-menu').height();
-      const popupWidth = $('#reply-control .popup-menu').width();
+        const popupHeight = $('#reply-control .popup-menu').height();
+        const popupWidth = $('#reply-control .popup-menu').width();
 
-      var top = myPos.top + buttonPos.top - 15;
-      var left = myPos.left + buttonPos.left - (popupWidth/2);
+        var top = myPos.top + buttonPos.top - 15;
+        var left = myPos.left + buttonPos.left - (popupWidth/2);
 
-      const composerPos = $('#reply-control').position();
+        const composerPos = $('#reply-control').position();
 
-      if (composerPos.top + top - popupHeight < 0) {
-        top = top + popupHeight + this.$('.options').height() + 50;
+        if (composerPos.top + top - popupHeight < 0) {
+          top = top + popupHeight + this.$('.options').height() + 50;
+        }
+
+        var replyWidth = $('#reply-control').width();
+        if (left + popupWidth > replyWidth) {
+          left = replyWidth - popupWidth - 40;
+        }
+
+        const selected = toolbarEvent.selected;
+        toolbarEvent.selectText(selected.start, selected.end - selected.start);
+
+        this.sendAction('showOptions', toolbarEvent,
+          { position: "absolute", left, top });
       }
-
-      var replyWidth = $('#reply-control').width();
-      if (left + popupWidth > replyWidth) {
-        left = replyWidth - popupWidth - 40;
-      }
-
-      const selected = toolbarEvent.selected;
-      toolbarEvent.selectText(selected.start, selected.end - selected.start);
-
-      this.sendAction('showOptions', toolbarEvent,
-        { position: "absolute", left, top });
     },
 
     showUploadModal(toolbarEvent) {
@@ -432,7 +436,7 @@ export default Ember.Component.extend({
           group: 'extras',
           icon: 'gear',
           title: 'composer.options',
-          sendAction: 'showOptions'
+          sendAction: 'toggleOptions'
         });
       }
 
diff --git a/app/assets/javascripts/discourse/templates/components/composer-editor.hbs b/app/assets/javascripts/discourse/templates/components/composer-editor.hbs
index e4ebb29c5db..53abe779581 100644
--- a/app/assets/javascripts/discourse/templates/components/composer-editor.hbs
+++ b/app/assets/javascripts/discourse/templates/components/composer-editor.hbs
@@ -5,7 +5,7 @@
            markdownOptions=markdownOptions
            extraButtons="extraButtons"
            importQuote="importQuote"
-           showOptions="showOptions"
+           toggleOptions="toggleOptions"
            showUploadModal="showUploadModal"
            togglePreview="togglePreview"
            validation=validation
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 4471943e168..0680e931a12 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -90,6 +90,8 @@
                           groupsMentioned="groupsMentioned"
                           importQuote="importQuote"
                           showOptions="showOptions"
+                          hideOptions="hideOptions"
+                          optionsVisible=optionsVisible
                           showToolbar=showToolbar
                           showUploadSelector="showUploadSelector"
                           afterRefresh="afterRefresh"}}