diff --git a/js/menu.js b/js/menu.js index 4b1a8515..da5e68c8 100644 --- a/js/menu.js +++ b/js/menu.js @@ -9,14 +9,17 @@ function Search(menu) { document.addEventListener('keydown', this.documentKeydown.bind(this)); - this.$searchBox.addEventListener( - 'keydown', - debounce(this.searchBoxKeydown.bind(this), { stopPropagation: true }), - ); - this.$searchBox.addEventListener( - 'keyup', - debounce(this.searchBoxKeyup.bind(this), { stopPropagation: true }), - ); + let requestHandleSearchBoxEvent = debounce(this.handleSearchBoxEvent.bind(this)); + + this.$searchBox.addEventListener('keydown', e => { + e.stopPropagation(); + if (e.key === 'Enter') e.preventDefault(); + requestHandleSearchBoxEvent(e); + }); + this.$searchBox.addEventListener('input', e => { + e.stopPropagation(); + requestHandleSearchBoxEvent(e); + }); // Perform an initial search if the box is not empty. if (this.$searchBox.value) { @@ -54,23 +57,15 @@ Search.prototype.documentKeydown = function (e) { } }; -Search.prototype.searchBoxKeydown = function (e) { - e.stopPropagation(); - e.preventDefault(); - if (e.keyCode === 191 && e.target.value.length === 0) { - e.preventDefault(); - } else if (e.keyCode === 13) { - e.preventDefault(); - this.selectResult(); - } -}; - -Search.prototype.searchBoxKeyup = function (e) { - if (e.keyCode === 13 || e.keyCode === 9) { - return; +Search.prototype.handleSearchBoxEvent = function (e) { + switch (e.type) { + case 'keydown': + if (e.key === 'Enter') this.selectResult(); + break; + case 'input': + this.search(e.target.value); + break; } - - this.search(e.target.value); }; Search.prototype.triggerSearch = function () { diff --git a/test/baselines/generated-reference/assets-inline.html b/test/baselines/generated-reference/assets-inline.html index fe3bb564..9f1493f1 100644 --- a/test/baselines/generated-reference/assets-inline.html +++ b/test/baselines/generated-reference/assets-inline.html @@ -93,14 +93,17 @@ document.addEventListener('keydown', this.documentKeydown.bind(this)); - this.$searchBox.addEventListener( - 'keydown', - debounce(this.searchBoxKeydown.bind(this), { stopPropagation: true }), - ); - this.$searchBox.addEventListener( - 'keyup', - debounce(this.searchBoxKeyup.bind(this), { stopPropagation: true }), - ); + let requestHandleSearchBoxEvent = debounce(this.handleSearchBoxEvent.bind(this)); + + this.$searchBox.addEventListener('keydown', e => { + e.stopPropagation(); + if (e.key === 'Enter') e.preventDefault(); + requestHandleSearchBoxEvent(e); + }); + this.$searchBox.addEventListener('input', e => { + e.stopPropagation(); + requestHandleSearchBoxEvent(e); + }); // Perform an initial search if the box is not empty. if (this.$searchBox.value) { @@ -138,23 +141,15 @@ } }; -Search.prototype.searchBoxKeydown = function (e) { - e.stopPropagation(); - e.preventDefault(); - if (e.keyCode === 191 && e.target.value.length === 0) { - e.preventDefault(); - } else if (e.keyCode === 13) { - e.preventDefault(); - this.selectResult(); - } -}; - -Search.prototype.searchBoxKeyup = function (e) { - if (e.keyCode === 13 || e.keyCode === 9) { - return; +Search.prototype.handleSearchBoxEvent = function (e) { + switch (e.type) { + case 'keydown': + if (e.key === 'Enter') this.selectResult(); + break; + case 'input': + this.search(e.target.value); + break; } - - this.search(e.target.value); }; Search.prototype.triggerSearch = function () {