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

Relies on discourse/discourse#32099 from
core, which introduces a searchInputId to differentiate
search inputs, since we have 3 now (welcome banner, header, icon)

Author: martin-brennan

.discourse-compatibility

@@ -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

common/common.scss

@@ -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";

javascripts/discourse/components/search-banner.hbs

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

mobile/mobile.scss

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

spec/system/viewing_search_banner_spec.rb

@@ -32,7 +32,7 @@
     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")

test/acceptance/search-banner-test.js

@@ -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,21 +43,21 @@ 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");
   });
 
   test("you can navigate search results with the keyboard", async function (assert) {
     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"
     );