UX: Clicking outside editor should close context menu (#170)

assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js

@@ -101,6 +101,7 @@ export default class AiHelperContextMenu extends Component {
   @bind
   selectionChanged() {
     if (document.activeElement !== this._dEditorInput) {
+      this.closeContextMenu();
       return;
     }
 
@@ -118,12 +119,6 @@ export default class AiHelperContextMenu extends Component {
       : "";
 
     if (this.selectedText.length === 0) {
-      if (this.loading || this.menuState === this.CONTEXT_MENU_STATES.review) {
-        // prevent accidentally closing context menu
-        // while results loading or in review state
-        return;
-      }
-
       this.closeContextMenu();
       return;
     }
@@ -170,7 +165,23 @@ export default class AiHelperContextMenu extends Component {
     });
   }
 
+  get canCloseContextMenu() {
+    if (this.loading) {
+      return false;
+    }
+
+    if (this.menuState === this.CONTEXT_MENU_STATES.review) {
+      return false;
+    }
+
+    return true;
+  }
+
   closeContextMenu() {
+    if (!this.canCloseContextMenu) {
+      return;
+    }
+
     this.showContextMenu = false;
     this.menuState = this.CONTEXT_MENU_STATES.triggers;
   }
@@ -265,6 +276,9 @@ export default class AiHelperContextMenu extends Component {
   undoAIAction() {
     const composer = this.args.outletArgs.composer;
     composer.set("reply", this.oldEditorValue);
+    // context menu is prevented from closing when in review state
+    // so we change to reset state quickly before closing
+    this.menuState = this.CONTEXT_MENU_STATES.resets;
     this.closeContextMenu();
   }
 

spec/system/ai_helper/ai_composer_helper_spec.rb

@@ -110,6 +110,12 @@ RSpec.describe "AI Composer helper", type: :system, js: true do
       expect(ai_helper_context_menu).to be_showing_options
     end
 
+    it "closes the context menu when clicking outside" do
+      trigger_context_menu(OpenAiCompletionsInferenceStubs.translated_response)
+      find(".d-editor-preview").click
+      expect(ai_helper_context_menu).to have_no_context_menu
+    end
+
     context "when using translation mode" do
       let(:mode) { OpenAiCompletionsInferenceStubs::TRANSLATE }
       before { OpenAiCompletionsInferenceStubs.stub_prompt(mode) }
@@ -242,6 +248,21 @@ RSpec.describe "AI Composer helper", type: :system, js: true do
         diff_modal.confirm_changes
         expect(ai_helper_context_menu).to be_showing_resets
       end
+
+      it "should not close the context menu when in review state" do
+        trigger_context_menu(OpenAiCompletionsInferenceStubs.spanish_text)
+        ai_helper_context_menu.click_ai_button
+        ai_helper_context_menu.select_helper_model(
+          OpenAiCompletionsInferenceStubs.text_mode_to_id(mode),
+        )
+
+        wait_for do
+          composer.composer_input.value == OpenAiCompletionsInferenceStubs.translated_response.strip
+        end
+
+        find(".d-editor-preview").click
+        expect(ai_helper_context_menu).to have_context_menu
+      end
     end
 
     context "when using the proofreading mode" do