From 30e32fa59aa30a7b913d7d47125c638eeb3ebef6 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Mon, 4 Dec 2023 14:19:45 +0000
Subject: [PATCH] UX: Only perform search when enter key is pressed (#159)

This makes docs search behavior consistent with the rest of Discourse. It also resolves a UX issue where the live search would cause the input to lose focus while typing.
---
 .../discourse/components/docs-search.js          | 16 +++++-----------
 .../templates/components/docs-search.hbs         |  2 +-
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/assets/javascripts/discourse/components/docs-search.js b/assets/javascripts/discourse/components/docs-search.js
index fd0b5af..988aa4e 100644
--- a/assets/javascripts/discourse/components/docs-search.js
+++ b/assets/javascripts/discourse/components/docs-search.js
@@ -1,21 +1,15 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
-import { debounce } from "@ember/runloop";
-import discourseDebounce from "discourse-common/lib/debounce";
 
 export default Component.extend({
   classNames: "docs-search",
 
-  debouncedSearch(term) {
-    // TODO: Use discouseDebounce when discourse 2.7 gets released.
-    const debounceFunc = discourseDebounce || debounce;
-
-    debounceFunc(this, "onSearch", term, 500);
-  },
-
   @action
-  onSearchTermChange(term) {
-    this.debouncedSearch(term);
+  onKeyDown(event) {
+    if (event.key === "Enter") {
+      this.set("searchTerm", event.target.value);
+      this.onSearch(event.target.value);
+    }
   },
 
   @action
diff --git a/assets/javascripts/discourse/templates/components/docs-search.hbs b/assets/javascripts/discourse/templates/components/docs-search.hbs
index 25da2f5..6b88549 100644
--- a/assets/javascripts/discourse/templates/components/docs-search.hbs
+++ b/assets/javascripts/discourse/templates/components/docs-search.hbs
@@ -6,7 +6,7 @@
     autocorrect="off"
     placeholder={{i18n "docs.search.placeholder"}}
     autocapitalize="off"
-    {{on "input" (action "onSearchTermChange" value="target.value")}}
+    {{on "keydown" this.onKeyDown}}
   />
 
   {{#if searchTerm}}