Field Auto-Focus issues

Wappler General Need Help
1

Using Node.
I am having some issues with a simple Auto-Focus on an input field on page load and wonder if any of you are having the same issue and if so, how to you find/correct the issue.

This is what I have:
<input type="text" id="Username" name="username" class="form-control" placeholder="Username" autofocus="true" autocomplete="off" >
or this should work also:
<input type="text" id="Username" name="username" class="form-control" placeholder="Username" autofocus autocomplete="off" >

I know you just to add autofocus to the html input tag or in Wappler under the DOM tree change auto-focus to true, however, it does not always work. I find that when using Node and using the layout pages and content pages, there are times will will prevent auto focus from working. On a simple layout page of just bootstrap 5, it works. However as soon as Wappler starts adding the linked files in the header when I add notifications, table generator, etc, at some point it blocks the auto-focus. I am trying to troubleshoot it but can't find the combination. I think it may be even some Wappler js files because sometimes if I click reload over and over, it will auto-focus for a second, then go away almost as if all the js files have not fully loaded yet. I have tried deleting some of the links, re-arranging, etc and I can't seem to find the combination unless I start with a clean layout header and keep it that way.

Anyone else have this issue?

2

I don't know if this is the answer you are looking for, but I use a very simple script for auto focus and it works wonderfully.

<script>
window.onload = function() {
    // Select the form field by its ID
    var inputField = document.getElementById('myInput');
    
    // Set focus to the input field
    inputField.focus();
};
</script>

Just replace myInput with the ID of your input Username.

2 Likes
3

Thanks Brad, I'll try that.

4

If you're using content/partial pages this won't work.
You can use @brad suggestion or use a flow:

image
image1500×518 31.5 KB

2 Likes
5

That works perfect! Thanks Brad.

1 Like
6

Thanks. Yes, Brad's solution works and I never thought to use a flow. Thanks for the tip.

7

We use page flow for this. Set it to auto-run, with just one run step - input1.focus().

1 Like
8

Thanks Sid. I did try that as well and it worked great.