-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Autofocus is lost once vue is loaded #8112
Comments
Either use |
Thank @KaelWD ! On the other hand, I wonder if it is worth a special handling for |
I tried to fix this with no luck. I think this is a similar issue lovelope@8109e44 but trying to fix it with the same idea won't work since Since I can use a little guidance here if possible. |
The other workaround is to simply avoid using in-dom templates, and use string templates or pre-compiled templates instead. https://jsfiddle.net/3gd0bLk5/ |
easier workaround is just add vue attribute |
I'm using VueJS with Laravel and I also noticed this problem. I'm in a PHP environment so "avoid using in-dom templates" is not an acceptable solution. |
I suppose you can use |
using :autofocus="'autofocus'" makes the html a mess |
@ThibaudDauce same thing here, I'm working with Laravel and some parts of my views (which contains autofocus) are not part of Vuejs.
const app = new Vue({
el: '#app',
mounted() {
let input = document.querySelector('[autofocus]');
if (input) {
input.focus()
}
}
}); I made a fiddle but it seems to be a bug and it doesn't work on Firefox either, but the code does: http://jsfiddle.net/azeos/quwLfj9c/ |
Thanks for the suggestions in this |
this will work in firefox if you replace this html |
You could also use native javascript
checkout the code here https://jsfiddle.net/w5f1teu0/ |
@marcus-hiles My application uses a barcode scanner gun and I have a function that directs the gun to do whatever I instruct it to do after they read as well as destroy it after reading it. Your autofocus solution along with @azeos works perfectly, but I was wondering if this can be setup to move the focus once the input field with initial focus has content in it. So that I can keep scanning without tabbing or using the mouse. Which event should I use? And this call for a nextTick? FOr example:
and add moveFocus as a blur event?
|
Damn... This is weird! I wasted too much time. I should have checked GitHub first. |
Why not adding a directive like |
Easy enough to use a ref and |
Any news on this? Very weird that standard HTML stops working when vue is mounted to form. |
Version
2.5.16
Reproduction link
https://jsfiddle.net/alfonsobries/u83vkLe1/
Steps to reproduce
When you add the autofocus attribute to an input it will be focused once is loaded, but when you init a Vue app the focus is lost so you need to manual focus an element
In this second link (witouth Vue the autofocus works)
Autofocus not lost
What is expected?
That an input keep focused if has the autofocus attribute
What is actually happening?
the focus is lost
Its possible to emulate this behaviour but i think it should work witouth need to "emulate" the behaivour
The text was updated successfully, but these errors were encountered: