Comments (5)
I looked into it. The issue with this line: https://github.com/BuilderIO/qwik/blob/e4493e57f1e5bdad89b071ab0c824a9efd367e93/starters/apps/starter/src/my-app.tsx#L25
Notice that there is text + {' '}
. Thes creates two text nodes. When these text nodes get serialized into HTML they get merged into one. Once the reconciliation algorithm runs the result is that the JSX does not match the HTML and results in the <input
being destroyed and re-created. This results in a loss of focus.
I think the fix is to update the reconciliation algorithm to see when there is extra text and auto-create text nodes out of it. Should be a straightforward fix.
from qwik.
Fixed by 7fadd18
from qwik.
I noticed this issue too
from qwik.
Tried a few different scenarios and looked at the flash of updates in dev tools...
Put the text in a paragraph (focus issue goes away)
Placing the input as a lone sibling and things work as expected?
Any ideas? 🤔
from qwik.
I found that the replaceNode
function causes this by removing the input
element before putting the mounted input
. So perhaps it should keep focus after replacing. You'll see this by setting a break point for when the initial input
element is removed.
from qwik.
Related Issues (20)
- [🐞] the qwik CLI should not clear the console history HOT 1
- Redirects Not Working [🐞]
- [🐞] Extremely unpleasant jumps and flashes for a simple HTML input HOT 5
- [🐞] onPost not working properly
- [🐞] Getting props/restProps inside component$() and turning them into signal doesn't seem to work like expected. HOT 1
- [🐞] Firefox: navigator.serviceWorker is undefined HOT 2
- [✨] Update your template to include eslint.config.js by default HOT 2
- [🐞] plugin:vite:esbuild] [plugin vite:esbuild] src/components/router-head/router-head.tsx: Duplicate key "dangerouslySetInnerHTML" HOT 3
- [🐞] SSG in fresh project not working HOT 2
- [✨] Please upgrade @auth/core version in qwik-auth HOT 26
- There are some tests is weird [🐞] HOT 2
- [✨] use modulepreload if supported
- [✨] Remove the initial lag for `useAuthSignin` HOT 1
- Modular Forms input loses focus when projected [🐞] HOT 1
- [🐞]
- [🐞] prisma integration HOT 1
- [🐞] Weird behavior when accessing props value in differents way HOT 2
- Probably meant the mdx HOT 1
- [✨] Add the `unwrapProxy` as a Low-Level API HOT 1
- [📖] Hooks Cookbook HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from qwik.