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.
This commit is contained in:
David Taylor 2023-12-04 14:19:45 +00:00 committed by GitHub
parent 500066c48c
commit 30e32fa59a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 12 deletions

View File

@ -1,21 +1,15 @@
import Component from "@ember/component"; import Component from "@ember/component";
import { action } from "@ember/object"; import { action } from "@ember/object";
import { debounce } from "@ember/runloop";
import discourseDebounce from "discourse-common/lib/debounce";
export default Component.extend({ export default Component.extend({
classNames: "docs-search", classNames: "docs-search",
debouncedSearch(term) {
// TODO: Use discouseDebounce when discourse 2.7 gets released.
const debounceFunc = discourseDebounce || debounce;
debounceFunc(this, "onSearch", term, 500);
},
@action @action
onSearchTermChange(term) { onKeyDown(event) {
this.debouncedSearch(term); if (event.key === "Enter") {
this.set("searchTerm", event.target.value);
this.onSearch(event.target.value);
}
}, },
@action @action

View File

@ -6,7 +6,7 @@
autocorrect="off" autocorrect="off"
placeholder={{i18n "docs.search.placeholder"}} placeholder={{i18n "docs.search.placeholder"}}
autocapitalize="off" autocapitalize="off"
{{on "input" (action "onSearchTermChange" value="target.value")}} {{on "keydown" this.onKeyDown}}
/> />
{{#if searchTerm}} {{#if searchTerm}}