From beae63f437de8c1ae9104a3fee5c463cc392cdde Mon Sep 17 00:00:00 2001 From: William Morales Date: Wed, 4 Sep 2024 08:45:48 -0500 Subject: [PATCH 1/3] Added on focus listener --- src/autocomplete.js | 38 ++++++++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/src/autocomplete.js b/src/autocomplete.js index efec9e0..c0b7d24 100644 --- a/src/autocomplete.js +++ b/src/autocomplete.js @@ -10,33 +10,34 @@ export default class Autocomplete extends Controller { ready: Boolean, submitOnEnter: Boolean, url: String, - minLength: Number, + minLength: { type: Number, default: 1 }, delay: { type: Number, default: 300 }, queryParam: { type: String, default: "q" }, - } + }; static uniqOptionId = 0 connect() { - this.close() + this.close(); - if(!this.inputTarget.hasAttribute("autocomplete")) this.inputTarget.setAttribute("autocomplete", "off") - this.inputTarget.setAttribute("spellcheck", "false") + if (!this.inputTarget.hasAttribute("autocomplete")) this.inputTarget.setAttribute("autocomplete", "off"); + this.inputTarget.setAttribute("spellcheck", "false"); - this.mouseDown = false + this.mouseDown = false; - this.onInputChange = debounce(this.onInputChange, this.delayValue) + this.onInputChange = debounce(this.onInputChange, this.delayValue); - this.inputTarget.addEventListener("keydown", this.onKeydown) - this.inputTarget.addEventListener("blur", this.onInputBlur) - this.inputTarget.addEventListener("input", this.onInputChange) - this.resultsTarget.addEventListener("mousedown", this.onResultsMouseDown) - this.resultsTarget.addEventListener("click", this.onResultsClick) + this.inputTarget.addEventListener("keydown", this.onKeydown); + this.inputTarget.addEventListener("blur", this.onInputBlur); + this.inputTarget.addEventListener("input", this.onInputChange); + this.resultsTarget.addEventListener("mousedown", this.onResultsMouseDown); + this.resultsTarget.addEventListener("click", this.onResultsClick); + this.inputTarget.addEventListener("focusin", this.onFocus); if (this.inputTarget.hasAttribute("autofocus")) { - this.inputTarget.focus() + this.inputTarget.focus(); } - this.readyValue = true + this.readyValue = true; } disconnect() { @@ -169,6 +170,15 @@ export default class Autocomplete extends Controller { }, { once: true }) } + onFocus = () => { + if (this.hiddenTarget.value) return; + + const query = this.inputTarget.value.trim(); + if (query && query.length >= this.minLengthValue) { + this.fetchResults(query); + } + }; + onInputChange = () => { if (this.hasHiddenTarget) this.hiddenTarget.value = "" From ffce3edc3673c97813780bf9940c00cba8c05d60 Mon Sep 17 00:00:00 2001 From: William Morales Date: Wed, 4 Sep 2024 08:45:48 -0500 Subject: [PATCH 2/3] Added on focus listener --- src/autocomplete.js | 38 +++++++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/src/autocomplete.js b/src/autocomplete.js index efec9e0..b7432d9 100644 --- a/src/autocomplete.js +++ b/src/autocomplete.js @@ -10,33 +10,32 @@ export default class Autocomplete extends Controller { ready: Boolean, submitOnEnter: Boolean, url: String, - minLength: Number, + minLength: { type: Number, default: 1 }, delay: { type: Number, default: 300 }, queryParam: { type: String, default: "q" }, - } + }; static uniqOptionId = 0 connect() { - this.close() + this.close(); - if(!this.inputTarget.hasAttribute("autocomplete")) this.inputTarget.setAttribute("autocomplete", "off") - this.inputTarget.setAttribute("spellcheck", "false") + if (!this.inputTarget.hasAttribute("autocomplete")) this.inputTarget.setAttribute("autocomplete", "off"); + this.inputTarget.setAttribute("spellcheck", "false"); - this.mouseDown = false + this.mouseDown = false; - this.onInputChange = debounce(this.onInputChange, this.delayValue) + this.onInputChange = debounce(this.onInputChange, this.delayValue); - this.inputTarget.addEventListener("keydown", this.onKeydown) - this.inputTarget.addEventListener("blur", this.onInputBlur) - this.inputTarget.addEventListener("input", this.onInputChange) - this.resultsTarget.addEventListener("mousedown", this.onResultsMouseDown) - this.resultsTarget.addEventListener("click", this.onResultsClick) + this.inputTarget.addEventListener("keydown", this.onKeydown); + this.inputTarget.addEventListener("blur", this.onInputBlur); + this.inputTarget.addEventListener("input", this.onInputChange); + this.resultsTarget.addEventListener("mousedown", this.onResultsMouseDown); + this.resultsTarget.addEventListener("click", this.onResultsClick); + this.inputTarget.addEventListener("focusin", this.onFocus); if (this.inputTarget.hasAttribute("autofocus")) { - this.inputTarget.focus() + this.inputTarget.focus(); } - - this.readyValue = true } disconnect() { @@ -169,6 +168,15 @@ export default class Autocomplete extends Controller { }, { once: true }) } + onFocus = () => { + if (this.hiddenTarget.value) return; + + const query = this.inputTarget.value.trim(); + if (query && query.length >= this.minLengthValue) { + this.fetchResults(query); + } + }; + onInputChange = () => { if (this.hasHiddenTarget) this.hiddenTarget.value = "" From 842039ea5fc0db49fa148ee3c3edcac797f49a51 Mon Sep 17 00:00:00 2001 From: William Morales Date: Wed, 4 Sep 2024 08:56:06 -0500 Subject: [PATCH 3/3] Delete unused variables --- src/autocomplete.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/autocomplete.js b/src/autocomplete.js index c0b7d24..b7432d9 100644 --- a/src/autocomplete.js +++ b/src/autocomplete.js @@ -36,8 +36,6 @@ export default class Autocomplete extends Controller { if (this.inputTarget.hasAttribute("autofocus")) { this.inputTarget.focus(); } - - this.readyValue = true; } disconnect() {