Corrige un problème sur la recherche en page d'accueil qui entre en conflit avec la recherche dans le menu (#1783)

* Corrige un problème sur la recherche en page d'accueil qui entre en conflit avec la recherche dans le menu

* WIP

* add e2e

* Finish test

* Fix test

* Revert

Author: fabienheureux

core/context_processors.py

@@ -39,8 +39,12 @@ def global_context(request) -> dict:
     if request.META.get("HTTP_HOST") not in settings.ASSISTANT["HOSTS"]:
         return base
 
+    search_form = SearchForm(prefix="header", initial={"id": "header"})
+    home_search_form = SearchForm(prefix="home", initial={"id": "home"})
+
     return {
         **base,
-        "search_form": SearchForm(),
+        "search_form": search_form,
+        "home_search_form": home_search_form,
         **constants.ASSISTANT,
     }

e2e_tests/assistant.spec.ts

@@ -32,6 +32,57 @@ test("Le lien infotri est bien défini", async ({ page }) => {
   expect(href).toBe("https://www.ecologie.gouv.fr/info-tri")
 })
 
+test(
+  "Les deux recherches en page d'accueil fonctionnent",
+  {
+    annotation: [
+      {
+        type: "issue",
+        description:
+          "https://www.notion.so/accelerateur-transition-ecologique-ademe/Assistant-Probl-me-sur-la-double-recherche-en-page-d-accueil-22a6523d57d78057981df59c74704cf9?source=copy_link",
+      },
+    ],
+  },
+  async ({ page }) => {
+    // Navigate to the carte page
+    await page.goto(`/`, { waitUntil: "domcontentloaded" })
+    await hideDjangoToolbar(page)
+
+    await page.locator("#id_home-input").click()
+    await page.locator("#id_home-input").pressSequentially("lave")
+    // We expect at least on search result
+    await page.waitForResponse(
+      (response) =>
+        response.url().includes("/assistant/recherche") && response.status() === 200,
+    )
+    expect(page.locator("#home [data-search-target=results] a").first()).toBeAttached()
+
+    await page.locator("#id_header-input").click()
+    await page.waitForResponse(
+      (response) =>
+        response.url().includes("/assistant/recherche") && response.status() === 200,
+    )
+    expect(page.locator("#home [data-search-target=results] a")).toHaveCount(0)
+    await page.locator("#id_header-input").pressSequentially("lave")
+    await page.waitForResponse(
+      (response) =>
+        response.url().includes("/assistant/recherche") && response.status() === 200,
+    )
+    expect(page.locator("#home [data-search-target=results] a")).toHaveCount(0)
+    expect(
+      page.locator("#header [data-search-target=results] a").first(),
+    ).toBeAttached()
+
+    await page.locator("#id_home-input").click()
+    await page.waitForResponse(
+      (response) =>
+        response.url().includes("/assistant/recherche") && response.status() === 200,
+    )
+    expect(page.locator("#home [data-search-target=results] a")).toHaveCount(0)
+    expect(page.locator("#header [data-search-target=results] a")).toHaveCount(0)
+  },
+)
+
 test("Le tracking PostHog fonctionne comme prévu", async ({ page }) => {
   // Check that homepage scores 1
   await page.goto(`/`, { waitUntil: "domcontentloaded" })

package-lock.json

@@ -45,6 +45,7 @@
     "eslint-config-prettier": "^10.1.5",
     "leaflet": "^1.9.4",
     "posthog-js": "^1.256.0",
+    "stimulus-use": "^0.52.3",
     "tailwindcss": "^3.4.17"
   },
   "devDependencies": {

package.json

@@ -19,15 +19,10 @@ class SearchInput(forms.TextInput):
 
 
 class SearchForm(DsfrBaseForm):
+    id = forms.CharField(required=False, widget=forms.HiddenInput())
     input = forms.CharField(
         help_text="Entrez un objet ou un déchet", required=False, widget=SearchInput
     )
-    iframe = forms.BooleanField(
-        required=False,
-        help_text="Ce champ sert uniquement à faire persister le mode iframe d'une page"
-        "à une recherche",
-        widget=forms.HiddenInput,
-    )
 
     def search(self) -> dict[str, str]:
         search_query: str = self.cleaned_data.get("input")

qfdmd/forms.py

@@ -47,8 +47,16 @@ def get_assistant_script(request):
 
 
 def search_view(request) -> HttpResponse:
-    form = SearchForm(request.GET)
-    context = {}
+    prefix_key = next(
+        (key for key in request.GET.dict().keys() if key.endswith("-id")), ""
+    )
+    form_kwargs = {}
+
+    if prefix := request.GET[prefix_key]:
+        form_kwargs.update(prefix=prefix, initial={"id": prefix})
+
+    form = SearchForm(request.GET, **form_kwargs)
+    context = {"prefix": form_kwargs, "prefix_key": prefix_key}
     template_name = SEARCH_VIEW_TEMPLATE_NAME
 
     if form.is_valid():

qfdmd/views.py

@@ -1,33 +1,33 @@
 import { Controller } from "@hotwired/stimulus"
+import { ClickOutsideController } from "stimulus-use"
 
-export default class extends Controller<HTMLFormElement> {
+export default class extends ClickOutsideController {
   declare readonly formTarget: HTMLFormElement
-  static targets = ["form"]
+  declare readonly resultsTarget: HTMLElement
+  static targets = ["form", "results"]
 
   submitForm() {
     this.formTarget.requestSubmit()
   }
 
   submitFirstItem() {
-    const firstResult = document.querySelector<HTMLAnchorElement>("#search-results > a")
+    const firstResult = this.resultsTarget.querySelector<HTMLAnchorElement>("a")
     if (firstResult) {
       firstResult.click()
     }
   }
 
   clear() {
-    for (const inputElement of this.formTarget.querySelectorAll("input")) {
+    for (const inputElement of this.formTarget.querySelectorAll("input[type=text]")) {
       inputElement.value = ""
       this.submitForm()
     }
   }
 
   #move(direction: "up" | "down") {
-    const searchResultAlreadyFocused = document.querySelector<HTMLAnchorElement>(
-      "#search-results > a:focus",
-    )
-    let elementToFocus =
-      document.querySelector<HTMLAnchorElement>("#search-results > a")
+    const searchResultAlreadyFocused =
+      this.resultsTarget.querySelector<HTMLAnchorElement>("a:focus")
+    let elementToFocus = this.resultsTarget.querySelector<HTMLAnchorElement>("a")
 
     if (searchResultAlreadyFocused) {
       searchResultAlreadyFocused.blur()

static/to_compile/controllers/assistant/search.ts

@@ -1,7 +1,9 @@
-<turbo-frame id="search">
+{% with id=search_form.id.value %}
+<turbo-frame id="{{ id }}">
     <div
         data-controller="search"
         data-action="
+            search:click:outside->search#clear:prevent
             keydown.esc->search#clear:prevent
             keydown.up->search#up:prevent
             keydown.down->search#down:prevent"
@@ -16,7 +18,7 @@
     >
         <form
             data-search-target="form"
-            data-turbo-frame="{{ id|default:'search-results' }}"
+            data-turbo-frame="{{ id }}:search-results"
             action="{% url 'qfdmd:search' %}"
             class="qf-pl-4w {# should match the svg icon width #}
             qf-flex qf-flex-row-reverse qf-relative
@@ -25,7 +27,6 @@
             qf-content-center
             "
         >
-
             {% for field in search_form %}
                 {{ field }}
             {% endfor %}
@@ -45,7 +46,8 @@
         </form>
 
         <turbo-frame
-            id="search-results"
+            id="{{ id }}:search-results"
+            data-search-target="results"
             class="qf-flex qf-flex-col"
         >
             {% if search_form.results %}
@@ -56,3 +58,4 @@
         </turbo-frame>
     </div>
 </turbo-frame>
+{% endwith %}

templates/components/search/view.html

@@ -14,7 +14,7 @@
     {# search + patchwork #}
     <div class="qf-w-full qf-max-w-3xl qf-m-auto qf-relative qf-pb-6w">
         <div class="qf-absolute qf-left-0 qf-right-0 qf-top-0">
-            {% include "components/search/view.html" with big=True id="search-home" %}
+            {% include "components/search/view.html" with big=True search_form=home_search_form %}
         </div>
     </div>