Add event handler for clicking the documentation icon

For some reason(unclear) setting the href property is causing the
main page to be reloaded when the documentation page is opened.

Likely due to some event handler listening to the click event and
triggering the reload but I could not figure out which one, hence
stop event propagation and open the documentation page manually.

Release-Notes: skip
Bug: Google b/485650902
Change-Id: I7461c6fd8f850270fda4f0b68d4f6b5f3c18aa4c

polygerrit-ui/app/elements/core/gr-search-autocomplete/gr-search-autocomplete.ts

diff --git a/polygerrit-ui/app/elements/core/gr-search-autocomplete/gr-search-autocomplete.ts b/polygerrit-ui/app/elements/core/gr-search-autocomplete/gr-search-autocomplete.ts
index 9b4d476..0604239 100644
--- a/polygerrit-ui/app/elements/core/gr-search-autocomplete/gr-search-autocomplete.ts
+++ b/polygerrit-ui/app/elements/core/gr-search-autocomplete/gr-search-autocomplete.ts
@@ -263,18 +263,14 @@
           ${when(
             !this.inputVal?.length,
             () => html`
-              <a
+              <md-icon-button
                 class="help"
                 slot="trailing-icon"
-                href=${getDocUrl(this.docsBaseUrl, 'user-search.html')}
-                target="_blank"
-                rel="noopener noreferrer"
-                tabindex="-1"
+                touch-target="none"
+                @click=${this.handleHelpClick}
               >
-                <md-icon-button touch-target="none">
-                  <gr-icon icon="help" title="read documentation"></gr-icon>
-                </md-icon-button>
-              </a>
+                <gr-icon icon="help" title="read documentation"></gr-icon>
+              </md-icon-button>
             `
           )}
         </gr-autocomplete>
@@ -415,6 +411,14 @@
     this.queryInput.selectAll();
   }
 
+  private handleHelpClick(e: Event) {
+    // There is another handler listening to this event triggering a reload
+    // of the change page, hence this event handler is required
+    e.preventDefault();
+    e.stopPropagation();
+    window.open(getDocUrl(this.docsBaseUrl, 'user-search.html'), '_blank');
+  }
+
   private handleQueryTextChanged(e: ValueChangedEvent) {
     this.inputVal = e.detail.value;
   }

polygerrit-ui/app/elements/core/gr-search-autocomplete/gr-search-autocomplete_test.ts

diff --git a/polygerrit-ui/app/elements/core/gr-search-autocomplete/gr-search-autocomplete_test.ts b/polygerrit-ui/app/elements/core/gr-search-autocomplete/gr-search-autocomplete_test.ts
index 24e80b3..771a3f7 100644
--- a/polygerrit-ui/app/elements/core/gr-search-autocomplete/gr-search-autocomplete_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-search-autocomplete/gr-search-autocomplete_test.ts
@@ -65,18 +65,14 @@
             skip-commit-on-item-select=""
             tab-complete=""
           >
-            <a
+            <md-icon-button
               class="help"
-              href="https://mydocumentationurl.google.com/user-search.html"
-              rel="noopener noreferrer"
               slot="trailing-icon"
-              tabindex="-1"
-              target="_blank"
+              touch-target="none"
+              value=""
             >
-              <md-icon-button touch-target="none" value="">
-                <gr-icon icon="help" title="read documentation"> </gr-icon>
-              </md-icon-button>
-            </a>
+              <gr-icon icon="help" title="read documentation"> </gr-icon>
+            </md-icon-button>
           </gr-autocomplete>
         </form>
       `