From e41026a49724665b914e4e4560930c65dc2f46ee Mon Sep 17 00:00:00 2001 From: Thierry Blind Date: Thu, 31 Aug 2023 16:06:45 +0200 Subject: [PATCH 01/10] Update misc.js --- lib/misc.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/lib/misc.js b/lib/misc.js index eeb64d10..d8c4e88c 100644 --- a/lib/misc.js +++ b/lib/misc.js @@ -30,3 +30,16 @@ export function hasKeyCodeByCode(arr, keyCode) { return has(arr) } } + +const HAS_WINDOW_SUPPORT = typeof window !== 'undefined' + +export const requestAF = HAS_WINDOW_SUPPORT + ? window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.msRequestAnimationFrame || + window.oRequestAnimationFrame || + // Fallback, but not a true polyfill + // Only needed for Opera Mini + ((cb) => setTimeout(cb, 16)) + : (cb) => setTimeout(cb, 0) From 97d3429b5dfa31604253697065f9176655539044 Mon Sep 17 00:00:00 2001 From: Thierry Blind Date: Thu, 31 Aug 2023 16:12:15 +0200 Subject: [PATCH 02/10] Update vue-simple-suggest.vue --- lib/vue-simple-suggest.vue | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/lib/vue-simple-suggest.vue b/lib/vue-simple-suggest.vue index ac3b4bbf..dbc33d86 100644 --- a/lib/vue-simple-suggest.vue +++ b/lib/vue-simple-suggest.vue @@ -20,7 +20,7 @@ :aria-labelledby="listId" :class="styles.suggestions" > -
  • +
    • -
  • +
  • { - this.inputElement = this.$refs['inputSlot'].querySelector('input') + requestAF(() => { + this.inputElement = this.$refs['inputSlot'].querySelector('input') - if (this.inputElement) { - this.setInputAriaAttributes() - this.prepareEventHandlers(true) - } else { - console.error('No input element found') - } + if (this.inputElement) { + this.setInputAriaAttributes() + this.prepareEventHandlers(true) + } else { + console.error('No input element found') + } + }) }) }, beforeDestroy () { @@ -574,6 +577,7 @@ export default { this.showList() } + // eslint-disable-next-line no-unsafe-finally return this.suggestions } }, @@ -628,6 +632,7 @@ export default { } this.isPlainSuggestion = nextIsPlainSuggestion + // eslint-disable-next-line no-unsafe-finally return result } }, From 40723937fa80adf8af6bf5dee7fe177d7d49269b Mon Sep 17 00:00:00 2001 From: Thierry Blind Date: Thu, 31 Aug 2023 16:14:33 +0200 Subject: [PATCH 03/10] Update vue-simple-suggest.vue --- lib/vue-simple-suggest.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/vue-simple-suggest.vue b/lib/vue-simple-suggest.vue index dbc33d86..39ebb281 100644 --- a/lib/vue-simple-suggest.vue +++ b/lib/vue-simple-suggest.vue @@ -303,7 +303,7 @@ export default { return this.isScopedSlotEmpty.call(this, slot) }, getPropertyByAttribute (obj, attr) { - return this.isPlainSuggestion ? obj : typeof obj !== undefined ? fromPath(obj, attr) : obj + return this.isPlainSuggestion ? obj : typeof obj !== 'undefined' ? fromPath(obj, attr) : obj }, displayProperty (obj) { if (this.isPlainSuggestion) { From 124625ed07ae9b49c217fdb4147dfca4c9a44c87 Mon Sep 17 00:00:00 2001 From: Thierry Blind Date: Thu, 31 Aug 2023 16:29:01 +0200 Subject: [PATCH 04/10] Update vue-simple-suggest.vue --- lib/vue-simple-suggest.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/vue-simple-suggest.vue b/lib/vue-simple-suggest.vue index 39ebb281..14019e0d 100644 --- a/lib/vue-simple-suggest.vue +++ b/lib/vue-simple-suggest.vue @@ -362,7 +362,7 @@ export default { this.hover(null) }, hover (item, elem) { - const elemId = !!item ? this.getId(item, this.hoveredIndex) : '' + const elemId = item ? this.getId(item, this.hoveredIndex) : '' this.inputElement.setAttribute('aria-activedescendant', elemId) From 155c16d23053299258b8b27063e34a0153964612 Mon Sep 17 00:00:00 2001 From: Thierry Blind Date: Fri, 1 Sep 2023 11:40:44 +0200 Subject: [PATCH 05/10] Update vue-simple-suggest.vue --- lib/vue-simple-suggest.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/vue-simple-suggest.vue b/lib/vue-simple-suggest.vue index 14019e0d..a78ba2dd 100644 --- a/lib/vue-simple-suggest.vue +++ b/lib/vue-simple-suggest.vue @@ -243,7 +243,9 @@ export default { }) }, beforeDestroy () { - this.prepareEventHandlers(false) + if (this.inputElement) { + this.prepareEventHandlers(false) + } }, methods: { isEqual(suggestion, item) { From a68d9461b8068688bd9e2bd9f24d3e1f2c70f856 Mon Sep 17 00:00:00 2001 From: Thierry Blind Date: Wed, 6 Sep 2023 11:42:57 +0200 Subject: [PATCH 06/10] Update vue-simple-suggest.vue --- lib/vue-simple-suggest.vue | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/lib/vue-simple-suggest.vue b/lib/vue-simple-suggest.vue index a78ba2dd..84fad855 100644 --- a/lib/vue-simple-suggest.vue +++ b/lib/vue-simple-suggest.vue @@ -66,7 +66,7 @@ import { fromPath, hasKeyCodeByCode, hasKeyCode, - requestAF + setIntervalImmediately } from './misc' export default { @@ -230,16 +230,25 @@ export default { await this.$slots.default; this.$nextTick(() => { - requestAF(() => { - this.inputElement = this.$refs['inputSlot'].querySelector('input') - + // https://jefrydco.id/en/blog/safe-access-vue-refs-undefined + var nbRetries = 0 + const interval = setIntervalImmediately(() => { + // The immediate call succeeded. if (this.inputElement) { + clearInterval(interval) + return + } + const slot = this.$refs['inputSlot'] + if (slot) { + this.inputElement = slot.querySelector('input') this.setInputAriaAttributes() this.prepareEventHandlers(true) - } else { + clearInterval(interval) + } else if (++nbRetries == 4) { + clearInterval(interval) console.error('No input element found') } - }) + }, 50) }) }, beforeDestroy () { From ee565bfbea3aefbc1836d9582eec09cb3b84d38e Mon Sep 17 00:00:00 2001 From: Thierry Blind Date: Wed, 6 Sep 2023 11:43:29 +0200 Subject: [PATCH 07/10] Update misc.js --- lib/misc.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/lib/misc.js b/lib/misc.js index d8c4e88c..aaee826e 100644 --- a/lib/misc.js +++ b/lib/misc.js @@ -31,15 +31,7 @@ export function hasKeyCodeByCode(arr, keyCode) { } } -const HAS_WINDOW_SUPPORT = typeof window !== 'undefined' - -export const requestAF = HAS_WINDOW_SUPPORT - ? window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.msRequestAnimationFrame || - window.oRequestAnimationFrame || - // Fallback, but not a true polyfill - // Only needed for Opera Mini - ((cb) => setTimeout(cb, 16)) - : (cb) => setTimeout(cb, 0) +export function setIntervalImmediately(func, interval) { + func() + return setInterval(func, interval) +} From 2a994419e42134d00652b22036faa17d76ac849f Mon Sep 17 00:00:00 2001 From: Thierry Blind Date: Wed, 6 Sep 2023 12:47:34 +0200 Subject: [PATCH 08/10] Update vue-simple-suggest.vue --- lib/vue-simple-suggest.vue | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/lib/vue-simple-suggest.vue b/lib/vue-simple-suggest.vue index 84fad855..e0fcf439 100644 --- a/lib/vue-simple-suggest.vue +++ b/lib/vue-simple-suggest.vue @@ -240,13 +240,17 @@ export default { } const slot = this.$refs['inputSlot'] if (slot) { - this.inputElement = slot.querySelector('input') - this.setInputAriaAttributes() - this.prepareEventHandlers(true) clearInterval(interval) + this.inputElement = slot.querySelector('input') + if (this.inputElement) { + this.setInputAriaAttributes() + this.prepareEventHandlers(true) + } else { + console.error('No input element found') + } } else if (++nbRetries == 4) { clearInterval(interval) - console.error('No input element found') + console.error('No input slot found') } }, 50) }) From 2058d01d77db14bd64294824d28e909b7cc52459 Mon Sep 17 00:00:00 2001 From: Thierry Blind Date: Tue, 12 Sep 2023 16:51:34 +0200 Subject: [PATCH 09/10] Update vue-simple-suggest.vue (rework the code) --- lib/vue-simple-suggest.vue | 50 ++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/lib/vue-simple-suggest.vue b/lib/vue-simple-suggest.vue index e0fcf439..3f8bcba3 100644 --- a/lib/vue-simple-suggest.vue +++ b/lib/vue-simple-suggest.vue @@ -226,34 +226,32 @@ export default { created () { this.controlScheme = Object.assign({}, defaultControls, this.controls) }, - async mounted () { - await this.$slots.default; - - this.$nextTick(() => { - // https://jefrydco.id/en/blog/safe-access-vue-refs-undefined - var nbRetries = 0 - const interval = setIntervalImmediately(() => { - // The immediate call succeeded. + async mounted() { + await this.$slots.default + await this.$nextTick() + // https://jefrydco.id/en/blog/safe-access-vue-refs-undefined + var nbRetries = 0 + const interval = setIntervalImmediately(() => { + // The immediate call succeeded. + if (this.inputElement) { + clearInterval(interval) + return + } + const slot = this.$refs['inputSlot'] + if (slot) { + clearInterval(interval) + this.inputElement = slot.querySelector('input') if (this.inputElement) { - clearInterval(interval) - return - } - const slot = this.$refs['inputSlot'] - if (slot) { - clearInterval(interval) - this.inputElement = slot.querySelector('input') - if (this.inputElement) { - this.setInputAriaAttributes() - this.prepareEventHandlers(true) - } else { - console.error('No input element found') - } - } else if (++nbRetries == 4) { - clearInterval(interval) - console.error('No input slot found') + this.setInputAriaAttributes() + this.prepareEventHandlers(true) + } else { + console.error('No input element found') } - }, 50) - }) + } else if (++nbRetries == 4) { + clearInterval(interval) + console.error('No input slot found') + } + }, 50) }, beforeDestroy () { if (this.inputElement) { From 399bc365f7f245ee654e3cb65333eac5bb0f954d Mon Sep 17 00:00:00 2001 From: Thierry Blind Date: Fri, 22 Dec 2023 10:38:55 +0100 Subject: [PATCH 10/10] Update vue-simple-suggest.vue (rework the code) --- lib/vue-simple-suggest.vue | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/lib/vue-simple-suggest.vue b/lib/vue-simple-suggest.vue index 3f8bcba3..e8d79f7f 100644 --- a/lib/vue-simple-suggest.vue +++ b/lib/vue-simple-suggest.vue @@ -231,15 +231,22 @@ export default { await this.$nextTick() // https://jefrydco.id/en/blog/safe-access-vue-refs-undefined var nbRetries = 0 - const interval = setIntervalImmediately(() => { + // Do not use "const interval = setIntervalImmediately(...)" to avoid + // ReferenceError: can't access lexical declaration 'interval' before initialization. + var interval = undefined + interval = setIntervalImmediately(() => { // The immediate call succeeded. if (this.inputElement) { - clearInterval(interval) + if (interval !== undefined) { + clearInterval(interval) + } return } const slot = this.$refs['inputSlot'] if (slot) { - clearInterval(interval) + if (interval !== undefined) { + clearInterval(interval) + } this.inputElement = slot.querySelector('input') if (this.inputElement) { this.setInputAriaAttributes() @@ -248,7 +255,9 @@ export default { console.error('No input element found') } } else if (++nbRetries == 4) { - clearInterval(interval) + if (interval !== undefined) { + clearInterval(interval) + } console.error('No input slot found') } }, 50)