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:
parent
500066c48c
commit
30e32fa59a
|
@ -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
|
||||||
|
|
|
@ -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}}
|
||||||
|
|
Loading…
Reference in New Issue