diff --git a/app/bibleview-js/src/components/modals/InputText.vue b/app/bibleview-js/src/components/modals/InputText.vue index 4a0da445ec..3c7fd43e79 100644 --- a/app/bibleview-js/src/components/modals/InputText.vue +++ b/app/bibleview-js/src/components/modals/InputText.vue @@ -38,8 +38,7 @@ import Modal from "@/components/modals/Modal"; import {ref} from "@vue/reactivity"; import {useCommon} from "@/composables"; -import {Deferred} from "@/utils"; -import {nextTick} from "@vue/runtime-core"; +import {Deferred, waitUntilRefValue} from "@/utils"; export default { name: "InputText", components: {Modal}, @@ -54,8 +53,7 @@ export default { error.value = _error; show.value = true; promise = new Deferred(); - await nextTick(); - await nextTick(); + await waitUntilRefValue(inputElement) inputElement.value.focus(); const result = await promise.wait() show.value = false; diff --git a/app/bibleview-js/src/utils.js b/app/bibleview-js/src/utils.js index fe14915bcf..ed7cda7980 100644 --- a/app/bibleview-js/src/utils.js +++ b/app/bibleview-js/src/utils.js @@ -15,7 +15,7 @@ * If not, see http://www.gnu.org/licenses/. */ -import {onBeforeUnmount, onMounted, onUnmounted} from "@vue/runtime-core"; +import {onBeforeUnmount, onMounted, onUnmounted, watch} from "@vue/runtime-core"; import Color from "color"; import {rybColorMixer} from "@/lib/ryb-color-mixer"; import {get, sortBy} from "lodash"; @@ -494,3 +494,18 @@ export function createDoubleClickDetector(waitMs = 300) { export function isBottomHalfClicked(event) { return event.clientY > (window.innerHeight / 2); } + +export async function waitUntilRefValue(ref_) { + return await new Promise(resolve => { + if (ref_.value) { + resolve(ref_.value); + return; + } + const stop = watch(ref_, newValue => { + if (newValue) { + stop(); + resolve(newValue); + } + }); + }); +}