github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 10:57:04 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Redirect to highlighted search result on 'Enter` (#24393)

Browse Source 
Raised in https://meta.discourse.org/t/keyboard-navigation-messes-up-the-search-menu/285405

We were incorrectly accessing the highlighted search result target's href which caused issues when navigating the topic list (eg /latest) with **j / k** and then immediately after accessing the search menu and navigating to and selecting a search result with the keyboard.  

### Current Behavior
Hitting enter on a search result redirects to the href of the topic in the topic list that was previously highlighted.

### Expected Behavior
Hitting enter on a search result redirects to the href of the highlighted search result.
This commit is contained in:
Isaac Janzen 2023-11-15 11:13:28 -07:00 committed by GitHub
parent e555e6f019
commit a7ff465ca6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/assets/javascripts/discourse/app/components/search-menu/results/types.js
View File

@ -23,24 +23,33 @@ export default class Types extends Component {
@action
onClick(event) {
this.routeToSearchResult(event);
}
@action
onKeydown(event) {
if (event.key === "Escape") {
this.args.closeSearchMenu();
event.preventDefault();
return false;
} else if (event.key === "Enter") {
this.routeToSearchResult(event);
return false;
}
this.search.handleResultInsertion(event);
this.search.handleArrowUpOrDown(event);
}
@action
routeToSearchResult(event) {
if (wantsNewWindow(event)) {
return;
}
event.preventDefault();
DiscourseURL.routeTo(event.currentTarget.href);
event.stopPropagation();
DiscourseURL.routeTo(event.target.href);
this.args.closeSearchMenu();
}
@action
onKeydown(e) {
if (e.key === "Escape") {
this.args.closeSearchMenu();
e.preventDefault();
return false;
}
this.search.handleResultInsertion(e);
this.search.handleArrowUpOrDown(e);
}
}

36
app/assets/javascripts/discourse/tests/acceptance/glimmer-search-test.js
View File

@ -1,4 +1,10 @@
import { click, fillIn, triggerKeyEvent, visit } from "@ember/test-helpers";
import {
click,
currentURL,
fillIn,
triggerKeyEvent,
visit,
} from "@ember/test-helpers";
import { test } from "qunit";
import { DEFAULT_TYPE_FILTER } from "discourse/components/search-menu";
import searchFixtures from "discourse/tests/fixtures/search-fixtures";
@ -481,6 +487,10 @@ acceptance("Search - Glimmer - Authenticated", function (needs) {
],
})
);
server.get("/t/2179.json", () => {
return helper.response({});
});
});
test("full page search - the right filters are shown", async function (assert) {
@ -626,6 +636,30 @@ acceptance("Search - Glimmer - Authenticated", function (needs) {
);
});
// see https://meta.discourse.org/t/keyboard-navigation-messes-up-the-search-menu/285405
test("search menu keyboard navigation - on 'Enter' keydown navigate to selected search item url", async function (assert) {
await visit("/");
await triggerKeyEvent(document, "keypress", "J");
await click("#search-button");
await fillIn("#search-term", "Development");
await triggerKeyEvent(document.activeElement, "keyup", "Enter");
await triggerKeyEvent(document.activeElement, "keyup", "ArrowDown");
const firstTopicResultUrl = "/t/development-mode-super-slow/2179";
assert.strictEqual(
document.activeElement.getAttribute("href"),
firstTopicResultUrl,
"first search result is highlighted"
);
await triggerKeyEvent(document.activeElement, "keydown", "Enter");
assert.strictEqual(
currentURL(),
firstTopicResultUrl,
"redirects to selected search result url"
);
});
test("initial options - recent search results", async function (assert) {
await visit("/");
await click("#search-button");