Comments (5)
Using a key is in fact the problem. It looks like I do need a key, but not for the part that scrolls. Removing the key from that fixed the problem.
Thanks, @cavemansspa and @osban!
from mithril.js.
hello @EverettMcKay, typically that should re-render in place. here's an example
if you can provide an example of your issue, we can advise.
from mithril.js.
Ok, thanks. My component basically boils down to this:
export const FhExample = () => ({
tag: "Example",
attrs: () => {},
state: () => {},
view: () => (
<>
<h1>Example</h1>
<div style="padding:8px 0;width:100%">
<div key={key} class="card" style="padding:8px 16px;margin:8px 8px">
<SelectOption condition={show based on state} attrs />
<SelectOption condition={show based on state} attrs />
<SelectOption condition={show based on state} attrs />
<SelectOption condition={show based on state} attrs />
<SelectOption condition={show based on state} attrs />
<SelectOption condition={show based on state} attrs />
<SelectOption condition={show based on state} attrs />
<SelectOption condition={show based on state} attrs />
<SelectOption condition={show based on state} attrs />
</div>
</div>
</>
),
});
The various options are displayed based on the current state. If the state changes, I increment the key to force a redraw.
Works great until the you scroll. Any redraw undoes the scroll.
from mithril.js.
changing the key will result in a full remove / replace, so that is likely resulting in the scroll reset. if you can reproduce the issue in a flems, we can have a closer look.
from mithril.js.
I agree with @cavemansspa. Using the autoredraw (and diff) of Mithril or m.redraw() (depending on how you deal with the state changes) should keep the scroll position. You might also want to either pass the state and such as attrs if it's external (deconstructing is possible: view: ({attrs: {tag, state, ...rest}}) =>
), or use the outer function of the closure you're using in case of internal state.
from mithril.js.
Related Issues (20)
- docs: tic tac toe example broken HOT 2
- TS + JSX users should be always using class components only, and this needs to be documented. HOT 2
- Is there any chance Mithril could run in Deno? HOT 4
- Can I Mithril for server-side components? HOT 3
- Confused about component redraws (and keys) HOT 8
- Why are v.attrs passed to oninit() for a child component an empty object? HOT 5
- There is no onsize/onresize lifecycle method HOT 4
- Typescript return type for mithril components HOT 14
- warning 'reuse attrs object' while receiving a component from high order function/component HOT 4
- Broken link to ospec in API page
- make vite the default HOT 4
- Redraw on resolve of async event handler HOT 1
- Please update the Vue comparison HOT 1
- onbeforeremove not being triggered when list element is removed HOT 2
- Form attribute not set in custom element HOT 1
- Add "main" field to package.json
- Need help with "Failed to execute 'insertBefore' on 'Node'" errors. HOT 2
- Is there a bug with dynamically changing svgs? HOT 15
- Current vnode `dom` property is undefined in `onbeforeupdate` HOT 4
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 mithril.js.