🐛 Code editor loses focus on HMR
theetrain opened this issue · comments
Describe the bug
When the page reloads while I type, I lose focus and have to click on the editor window each time. I believe this occurs when there's a server error (500).
Reproduction
- Go to any SvelteLab project with 500 error (https://www.sveltelab.dev/fna60gnp6v4c07d)
- Try editing
+page.jscode - Observe losing focus on the editor pane
Expected behavior
I'm able to maintain pane focus while coding.
Screenshots
20230703.localstorage.mov
Additional context
Chrome 114.0.5735.198
macOS 12.6.7
Does this happens only with 500 from your experience? I had this bug and was trying to reproduce without luck. Also I feel like is vite doing some trickery here. I'll investigate further
Yeah I couldn't reproduce it with brand new Sveltelab projects, but it appears consistently when there's a 500 error.
Mmm it's not always like that tho
https://www.sveltelab.dev/cjdymu0i4lj2hdo
Here an error 500 doesn't make the editor lose focus (at least in my case)...what browser are you using?
Ok apparently is the ssr false that causes this
I can't reproduce that anymore...i don't know what's real 😄
@mattcroat also keeps talking about, and I think also mentioned an official svelte site also doing that. Maybe something in PuruVJ/neocodemirror?
What Browser and OS are you using @theetrain?
What Browser and OS are you using @theetrain?
From the issue above:
Chrome 114.0.5735.198
macOS 12.6.7
From the issue above:
Oh you have that info already. I'm sorry 🙈
From the issue above:
Oh you have that info already. I'm sorry 🙈
That is actually my fault because i asked first lol sorry
Btw just opened literally your example and now it works flawlessly.
I tried it now, but the problem persists.
- I go to https://www.sveltelab.dev/fna60gnp6v4c07d
- I open
+page.js - I try typing
console.logon line 3, but after every keystroke I lose focus right after auto-refresh
I tried it now, but the problem persists.
- I go to https://www.sveltelab.dev/fna60gnp6v4c07d
- I open
+page.js- I try typing
console.logon line 3, but after every keystroke I lose focus right after auto-refresh
Oh my god if you open the devtools it doesn't lose focus 🤯
2023-07-04.15-41-05.mp4
@paoloricciuti you can try with the popout devtools!
@paoloricciuti you can try with the popout devtools!
I docked the devtools just to show them in the video, I noticed this behavior with the popout devtools
okay for me the popout devtools make the issue appear again but im kind of lost what to try next 👀
why if focus even changing?!
okay for me the popout devtools make the issue appear again but im kind of lost what to try next 👀 why if focus even changing?!
I have the gut feeling that this some sort of weird browser behavior
Mmm it happens on firefox too and there it actually happens even after the console is open. I added a script in the console to show the activeElement each 400ms and it's indeed the iframe that gains focus
Btw it happens on stackblitz too
https://stackblitz.com/edit/sveltejs-kit-template-default-rec6c5?file=src%2Froutes%2F%2Bpage.js
their debounce is more forgiving tho...
their debounce is more forgiving tho...
Well it's customizable on SvelteLab 😎
While working on a SvelteLab project just now, I was able to code through 500 errors without losing focus. Something good must have happened 😁
While working on a SvelteLab project just now, I was able to code through 500 errors without losing focus. Something good must have happened 😁
Btw as a workaround you can set the debounce to an high number in the editor preferences (both in the command palette and the menu)