I can prevent a mithril component from scrolling to the top on a rerender.

[EverettMcKay]

I can prevent a mithril component from scrolling to the top on a rerender.

[EverettMcKay]

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!

[cavemansspa]

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.

[EverettMcKay]

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.

[cavemansspa]

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.

[osban]

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.