search

1Marc / modern-todomvc-vanillajs

TodoMVC with Modern (ES6+), Vanilla JavaScript
https://frontendmasters.com/blog/vanilla-javascript-todomvc/
1.12k stars 112 forks source link

Focus lost when toggling #29

Closed johnfactotum closed 8 months ago

johnfactotum commented 12 months ago

Current behavior: When you toggle an item, since it's re-rendered, the focus is be lost.

Expected behavior: Focus remains on the checkbox or label when toggling.

Additional context: I think this is a common problem with naive declarative UI implementations. React, at least, doesn't seem have this problem with its sophisticated virtual DOM.

Btw, if you're interested, I took a stab at recreating TodoMVC in vanilla JavaScript with Web Components, with a somewhat unorthodox approach: https://github.com/johnfactotum/todomvc

1Marc commented 12 months ago

Interesting. I’ll take a look. The lit-html and performant lists branches don’t have this issue because they take a more targeted rendering approach rather than replacing everything on render.

1Marc commented 8 months ago

Saved focus and restored focus in ~18 lines of code. Thanks for pointing this out! It was fun.