Avoid putting interactive elements inside PowerSelect

This pattern started breaking on Ember 3.28, causing a hard redirect out of QUnit and making a test time out.
emberobserver · Oct 4, 2023 · 2bf7ae5 · 2bf7ae5
1 parent fe93dc6
commit 2bf7ae5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/app/components/page-layout.hbs b/app/components/page-layout.hbs
@@ -7,17 +7,25 @@
       </LinkTo>
       {{#if this.showHeaderSearch}}
         <div class="search with-default-styling test-header-search">
-          <PowerSelectTypeahead @search={{perform this.searchForAddons}} @selected={{this.selectedAddon}} @placeholder="Search" @dropdownClass="test-header-search-dropdown" @noMatchesMessage="No matching addon names, try another search!" @onChange={{perform this.goToAddon}} as |addonName options|>
+          <PowerSelectTypeahead
+            @search={{perform this.searchForAddons}}
+            @selected={{this.selectedAddon}}
+            @placeholder="Search"
+            @dropdownClass="test-header-search-dropdown"
+            @noMatchesMessage="No matching addon names, try another search!"
+            @onChange={{perform this.goToAddon}}
+            as |addonName|
+          >
             {{#if addonName.isFullSearchLink}}
-              <LinkTo @route="index" @query={{hash query=options.searchText}} class="jump-to-full-search test-search-result-jump-to-full-search-link">
+              <span class="jump-to-full-search test-search-result test-search-result-jump-to-full-search-link">
                 {{#if addonName.noResults}}
                   No matching addons (by name). Try a full search &raquo;
                 {{else}}
                   Perform full search &raquo;
                 {{/if}}
-              </LinkTo>
+              </span>
             {{else}}
-              <LinkTo @route="addons.show" @model={{addonName}} class="test-search-result-addon-link">{{addonName}}</LinkTo>
+              <span class="test-search-result test-search-result-addon-link">{{addonName}}</span>
             {{/if}}
           </PowerSelectTypeahead>
           {{#if this.searchForAddons.isRunning}}

diff --git a/app/styles/components/_page-layout.scss b/app/styles/components/_page-layout.scss
@@ -240,3 +240,8 @@
     }
   }
 }
+
+// This must be at root level because power-select wormholes the element out of its template context
+.test-search-result {
+  @extend a;
+}