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.5.0.beta1-dev: 2cab4e99e04cd6a9067abb1115b1de29a968f1f7
< 3.4.0.beta2-dev: ba7630cd78bf2a50981cafc0a613df9439cb5968 < 3.4.0.beta2-dev: ba7630cd78bf2a50981cafc0a613df9439cb5968
< 3.4.0.beta1-dev: f7e141653af4145e086e5917067ce17ab0ce2feb < 3.4.0.beta1-dev: f7e141653af4145e086e5917067ce17ab0ce2feb

10
common/common.scss
View File

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

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

@ -15,7 +15,7 @@
{{#unless this.buttonText}} {{#unless this.buttonText}}
<SearchIcon /> <SearchIcon />
{{/unless}} {{/unless}}
<SearchMenu /> <SearchMenu @searchInputId="custom-search-input" />
{{#if this.buttonText}} {{#if this.buttonText}}
<SearchIcon <SearchIcon
@buttonText={{this.buttonText}} @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%; 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) topic_page.visit_topic(topic)
expect(topic_page).to have_css(".custom-search-banner") 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 topic_page.find(".custom-search-banner .results li:nth-child(2) a").click
expect(topic_page).to have_css(".custom-search-banner .search-context") 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) { test("Advanced Search Banner is present", async function (assert) {
await visit("/"); 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) { 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) { test("it closes the search menu when clicking outside", async function (assert) {
await visit("/"); await visit("/");
await click(".custom-search-banner input#search-term"); await click(".custom-search-banner input#custom-search-input");
await fillIn(".custom-search-banner input#search-term", "test"); await fillIn(".custom-search-banner input#custom-search-input", "test");
assert.dom(".custom-search-banner .results").exists(); assert.dom(".custom-search-banner .results").exists();
// select a element to simulate clicking outside the search banner // 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) { test("pressing escape closes the search menu", async function (assert) {
await visit("/"); await visit("/");
await click(".custom-search-banner input#search-term"); await click(".custom-search-banner input#custom-search-input");
await fillIn(".custom-search-banner input#search-term", "test"); await fillIn(".custom-search-banner input#custom-search-input", "test");
assert.dom(".custom-search-banner .results").exists(); assert.dom(".custom-search-banner .results").exists();
await triggerKeyEvent( await triggerKeyEvent(
".custom-search-banner #search-term", ".custom-search-banner #custom-search-input",
"keydown", "keydown",
"Escape" "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) { test("searching for a term in the search menu fills in the search banner search input", async function (assert) {
await visit("/"); await visit("/");
await click("#search-button"); await click("#search-button");
await fillIn("#search-term", "test"); await fillIn("#custom-search-input", "test");
assert assert
.dom(".custom-search-banner input#search-term") .dom(".custom-search-banner input#custom-search-input")
.hasValue("test", "search inputs have matching terms"); .hasValue("test", "search inputs have matching terms");
}); });
@ -53,11 +53,11 @@ acceptance("Discourse Advanced Search Banner", function (needs) {
const container = ".custom-search-banner .results"; const container = ".custom-search-banner .results";
await visit("/"); await visit("/");
await click(".custom-search-banner input#search-term"); await click(".custom-search-banner input#custom-search-input");
await fillIn(".custom-search-banner input#search-term", "test"); await fillIn(".custom-search-banner input#custom-search-input", "test");
await triggerKeyEvent( await triggerKeyEvent(
".custom-search-banner #search-term", ".custom-search-banner #custom-search-input",
"keyup", "keyup",
"Enter" "Enter"
); );