Prompt input is not focused on mobile

[mihaiconstantin]

Please consider the following template:

<%-*
let textPromise = tp.system.prompt("Type something...", multiline = true)
let textValue = await textPromise
_%>

<% textValue %>

Upon inspecting the HTML it seems that the input in the modal is lacking the autofocus attribute, as seen below:

Because of this, when the template is triggered on mobile, the input is not focused, i.e.:

I can work around this, by focusing the element programmatically, i.e.:

<%-*
let textPromise = tp.system.prompt("Type something...", multiline = true)

// Focus the input element programmatically.
document.getElementsByClassName("templater-prompt-input")[0].focus()

let textValue = await textPromise
_%>

<% textValue %>

But I think it would be helpful, and unobtrusive if you add the autofocus attribute on the prompt element. This way, the prompt input will also behave in line with its suggester counterpart.

Also, thanks a lot for the awesome plugin!

[FelipeRearden]

Hello @mihaiconstantin !!!

I can work around this, by focusing the element programmatically, i.e.:

I just wanna say thank for sharing this script 🙏

I have been struggling with focus on prompt on Mobile for a long time and your script saved me on this issue.

I hope we can get a fix for this on a future release 🙏

Again, thank you very much for sharing this script, you have no idea how happy I am to finally be able to get the focus on my prompts :)

I wish you a fantastic day ☀️

[mihaiconstantin]

@FelipeRearden, I'm glad to hear it helps. If you need to apply the above to more complex scenarios than maybe these scripts will help as well. For example, check out the prompt user scrip.

[FelipeRearden]

Woowww @mihaiconstantin this is amazing, thank you very much for sharing and creating this amazing site.

I am gonna read the scripts and I am sure that I will improve my workflow using your scripts !

Have a great day!

[AB1908]

Hey Mihai, want to push a PR that adds this?

[mihaiconstantin]

Hey @AB1908, sure thing, will submit a PR.

[Zachatoo]

Unfortunately, adding the autofocus attribute on the input element doesn't appear to resolve the issue on mobile. I've tried a few other options like running the .focus() method on the input element and even using document.getElementsByClassName("templater-prompt-input")[0].focus(), but no dice. Only works if I add it to the template, not in the Templater code.

I'm sure there's something simple I'm missing.