FIX: Allow Enter key to work inside select-kit within modals (#36596)

ZogStriP · web-flow · commit f363ae5a15ab · 2025-12-11T10:41:32.000+01:00
When selecting an item in a select-kit dropdown (e.g., the assignee chooser in the assign modal), pressing Enter would close the modal without completing the selection. This was caused by commit 1d2ae51 which added `{ capture: true }` to the modal's keydown listener to prevent keypresses from leaking outside modals. However, this caused the modal to intercept Enter before the select-kit could process it, triggering the primary button click prematurely. Add a check for `.select-kit` elements in `shouldTriggerClickOnEnter()` so the modal defers to select-kit's own Enter key handling. Ref - meta/t/390910
diff --git a/frontend/discourse/app/components/d-modal.gjs b/frontend/discourse/app/components/d-modal.gjs
@@ -100,11 +100,12 @@ export default class DModal extends Component {
       return false;
     }
 
-    // skip when in a form or a textarea element
+    // skip when in a form, textarea, or select-kit element
     if (
       event.target.closest("form") ||
       document.activeElement?.closest("form") ||
-      document.activeElement?.nodeName === "TEXTAREA"
+      document.activeElement?.nodeName === "TEXTAREA" ||
+      document.activeElement?.closest(".select-kit")
     ) {
       return false;
     }
diff --git a/frontend/discourse/tests/integration/components/d-modal-test.gjs b/frontend/discourse/tests/integration/components/d-modal-test.gjs
@@ -222,4 +222,37 @@ module("Integration | Component | d-modal", function (hooks) {
 
     assert.true(actionCalled, "pressing enter triggers the default button");
   });
+
+  test("enter inside select-kit does not trigger default action", async function (assert) {
+    let actionCalled = false;
+    const someAction = () => {
+      actionCalled = true;
+    };
+
+    await render(
+      <template>
+        <DModal @inline={{true}}>
+          <:body>
+            <div class="select-kit">
+              <input class="filter-input" type="text" />
+            </div>
+          </:body>
+          <:footer>
+            <DButton
+              @action={{someAction}}
+              @translatedLabel="Perform action"
+              class="btn-primary"
+            />
+          </:footer>
+        </DModal>
+      </template>
+    );
+
+    await triggerKeyEvent(".filter-input", "keydown", "Enter");
+
+    assert.false(
+      actionCalled,
+      "pressing enter inside select-kit does not trigger the default button"
+    );
+  });
 });
diff --git a/plugins/discourse-assign/spec/system/assign_topic_spec.rb b/plugins/discourse-assign/spec/system/assign_topic_spec.rb
@@ -51,6 +51,19 @@
       expect(find("#topic .assigned-to")).to have_content(admin2.username)
     end
 
+    it "can assign using keyboard navigation" do
+      visit "/t/#{topic.id}"
+
+      topic_page.click_assign_topic
+      assign_modal.select_assignee_with_keyboard(admin2)
+      assign_modal.confirm
+
+      expect(assign_modal).to be_closed
+
+      expect(topic_page).to have_assigned(user: admin2, at_post: 2)
+      expect(find("#topic .assigned-to")).to have_content(admin2.username)
+    end
+
     context "when prioritize_full_name_in_ux setting is enabled" do
       before { SiteSetting.prioritize_full_name_in_ux = true }
 
diff --git a/plugins/discourse-assign/spec/system/page_objects/modals/assign.rb b/plugins/discourse-assign/spec/system/page_objects/modals/assign.rb
@@ -9,6 +9,15 @@ def assignee=(assignee)
         find("li[data-value='#{assignee}']").click
       end
 
+      def select_assignee_with_keyboard(assignee)
+        assignee = assignee.is_a?(Group) ? assignee.name : assignee.username
+        input = find(".control-group input")
+        input.fill_in(with: assignee)
+        find("li[data-value='#{assignee}']")
+        input.send_keys(:down)
+        input.send_keys(:enter)
+      end
+
       def status=(status)
         find("#assign-status").click
         find("[data-value='#{status}']").click

Original file line number	Diff line number	Diff line change
`@@ -100,11 +100,12 @@ export default class DModal extends Component {`
`100`	`100`	`return false;`
`101`	`101`	`}`
`102`	`102`
`103`		`- // skip when in a form or a textarea element`
	`103`	`+ // skip when in a form, textarea, or select-kit element`
`104`	`104`	`if (`
`105`	`105`	`event.target.closest("form") \|\|`
`106`	`106`	`document.activeElement?.closest("form") \|\|`
`107`		`- document.activeElement?.nodeName === "TEXTAREA"`
	`107`	`+ document.activeElement?.nodeName === "TEXTAREA" \|\|`
	`108`	`+ document.activeElement?.closest(".select-kit")`
`108`	`109`	`) {`
`109`	`110`	`return false;`
`110`	`111`	`}`