discourse
/
discourse-search-banner
mirror of https://github.com/discourse/discourse-search-banner.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Use search input id for <SearchMenu /> component (#87) 

Relies on https://github.com/discourse/discourse/pull/32099 from
core, which introduces a searchInputId to differentiate
search inputs, since we have 3 now (welcome banner, header, icon)
This commit is contained in:
Martin Brennan 2025-04-04 11:54:51 +10:00 committed by GitHub
parent 5ad224e3b3
commit 1fe3ff23f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.discourse-compatibility
View File

@ -1,3 +1,4 @@
< 3.5.0.beta3-dev: 5ad224e3b3a369fe1cbacd19733f647654dcbb49
< 3.5.0.beta1-dev: 2cab4e99e04cd6a9067abb1115b1de29a968f1f7
< 3.4.0.beta2-dev: ba7630cd78bf2a50981cafc0a613df9439cb5968
< 3.4.0.beta1-dev: f7e141653af4145e086e5917067ce17ab0ce2feb

10
common/common.scss
View File

@ -2,6 +2,10 @@
$max-width: 600px;
.welcome-banner {
display: none;
}
.display-search-banner {
#main-outlet {
padding-top: 0;
@ -64,7 +68,7 @@ $max-width: 600px;
}
.search-input {
#search-term {
input.search-term__input {
min-width: 0;
flex: 1 1;
}
@ -177,9 +181,5 @@ $max-width: 600px;
}
}
.welcome-banner {
display: none;
}
// these are add-on styles controlled by settings
@import "special-styles";

2
javascripts/discourse/components/search-banner.hbs
View File

@ -15,7 +15,7 @@
{{#unless this.buttonText}}
<SearchIcon />
{{/unless}}
<SearchMenu />
<SearchMenu @searchInputId="custom-search-input" />
{{#if this.buttonText}}
<SearchIcon
@buttonText={{this.buttonText}}

2
mobile/mobile.scss
View File

@ -6,6 +6,6 @@
}
}
.search-menu .search-input input#search-term {
.search-menu .search-input input.search-term__input {
width: 100%;
}

2
spec/system/viewing_search_banner_spec.rb
View File

@ -32,7 +32,7 @@ RSpec.describe "Viewing the search banner", type: :system do
topic_page.visit_topic(topic)
expect(topic_page).to have_css(".custom-search-banner")
topic_page.find(".custom-search-banner input#search-term").fill_in(with: "test")
topic_page.find(".custom-search-banner input#custom-search-input").fill_in(with: "test")
topic_page.find(".custom-search-banner .results li:nth-child(2) a").click
expect(topic_page).to have_css(".custom-search-banner .search-context")

22
test/acceptance/search-banner-test.js
View File

@ -7,7 +7,7 @@ acceptance("Discourse Advanced Search Banner", function (needs) {
test("Advanced Search Banner is present", async function (assert) {
await visit("/");
assert.dom(".custom-search-banner input#search-term").exists();
assert.dom(".custom-search-banner input#custom-search-input").exists();
});
test("is only present on intended routes", async function (assert) {
@ -17,8 +17,8 @@ acceptance("Discourse Advanced Search Banner", function (needs) {
test("it closes the search menu when clicking outside", async function (assert) {
await visit("/");
await click(".custom-search-banner input#search-term");
await fillIn(".custom-search-banner input#search-term", "test");
await click(".custom-search-banner input#custom-search-input");
await fillIn(".custom-search-banner input#custom-search-input", "test");
assert.dom(".custom-search-banner .results").exists();
// select a element to simulate clicking outside the search banner
@ -28,12 +28,12 @@ acceptance("Discourse Advanced Search Banner", function (needs) {
test("pressing escape closes the search menu", async function (assert) {
await visit("/");
await click(".custom-search-banner input#search-term");
await fillIn(".custom-search-banner input#search-term", "test");
await click(".custom-search-banner input#custom-search-input");
await fillIn(".custom-search-banner input#custom-search-input", "test");
assert.dom(".custom-search-banner .results").exists();
await triggerKeyEvent(
".custom-search-banner #search-term",
".custom-search-banner #custom-search-input",
"keydown",
"Escape"
);
@ -43,9 +43,9 @@ acceptance("Discourse Advanced Search Banner", function (needs) {
test("searching for a term in the search menu fills in the search banner search input", async function (assert) {
await visit("/");
await click("#search-button");
await fillIn("#search-term", "test");
await fillIn("#custom-search-input", "test");
assert
.dom(".custom-search-banner input#search-term")
.dom(".custom-search-banner input#custom-search-input")
.hasValue("test", "search inputs have matching terms");
});
@ -53,11 +53,11 @@ acceptance("Discourse Advanced Search Banner", function (needs) {
const container = ".custom-search-banner .results";
await visit("/");
await click(".custom-search-banner input#search-term");
await fillIn(".custom-search-banner input#search-term", "test");
await click(".custom-search-banner input#custom-search-input");
await fillIn(".custom-search-banner input#custom-search-input", "test");
await triggerKeyEvent(
".custom-search-banner #search-term",
".custom-search-banner #custom-search-input",
"keyup",
"Enter"
);