Input selection moves page focus to top of page

[rbcavanaugh]

I suspect this is just my lack of understanding - but whenever a user makes an input selection, the page resets to the top of the page.

An example is here: https://roux-ohdsi.observablehq.cloud/interactive-frailty-indices/

• to reproduce, scroll down and change the y-axis limits.

The lower two plost are nested within HTML cards rather than a js chunk, but I'm not sure if that's the issue:

<div class="grid grid-cols-2">
  ${resize((width) => 
    Plot.plot({
      title: "VAFI category incidence by data source",...

[mbostock]

Interesting. I see the behavior in Safari and Firefox, but not in Chrome. It might have something to do with subtle differences in behavior for the ResizeObserver. If the content is briefly removed during redraw before it has a chance to render asynchronously, that could cause Safari & Firefox to think it needs to scroll up.

[rbcavanaugh]

Strange - It's across all 3 for me. Do you have any suggestions? Are there different ways of creating user inputs that might avoid this?

[mbostock]

I’m seeing it now in Chrome, too. Perhaps it was intermittent.

[mbostock]

I believe the problem is triggered by the asynchronous nature of the resize helper.

The resize helper causes the plot to be rendered (and re-rendered) asynchronously whenever the ResizeObserver invokes its callback. The problem here is that the very first render (whenever a code block is run) is also asynchronous because the ResizeObserver’s target has not yet been attached to the DOM and hence the ResizeObserver can’t measure its size. Therefore the resize helper initially returns an empty DIV element, which is then almost-instantaneously populated once the ResizeObserver invokes the callback. This happens so fast that you can’t see the empty DIV, but the browser still “sees” it, causing the page to scroll up.

When you interact with the input, the associated generator yields a new value, and the Observable runtime then re-runs the code block referencing the input’s value. This creates a new ResizeObserver into a new empty DIV element, replacing the previous output. The ResizeObserver waits for the new DIV element to be attached to the DOM before invoking its callback to render the chart. That callback happens nearly instantaneously; but because it’s not synchronous, the browser thinks the page is shorter and forces the viewport to scroll up.

There are a variety of ways to fix this issue…

You could put some extra padding below the chart so that even when the charts briefly render as empty (due to asynchronous rendering via resize), the page doesn’t get short and the page doesn’t scroll up. But perhaps even better would be to set a fixed height for the grid containing these charts so that they don’t resize. You can do that by setting the grid-auto-rows style:

<div class="grid grid-cols-2" style="grid-auto-rows: 580px;">
  <div class="card">
    …
  </div>
  <div class="card">
    …
  </div>
</div>

You’ll have to change the 580px if you alter the contents of the page, but maybe that’s worth the trouble.

Another solution would be to avoid creating a new ResizeObserver when the state changes by using mutable state. That’s a bit convoluted but it allows you to do animated transitions and incremental updates, and it looks like this:

```js
const clicks = view(Inputs.button());
```

```js
let currentChart;
let currentWidth;
let currentClicks;

function updateChart({width, clicks}) {
  if (width === undefined) width = currentWidth; else currentWidth = width;
  if (clicks === undefined) clicks = currentClicks; else currentClicks = clicks;
  if (width === undefined || clicks === undefined) return;
  const chart = Plot.frame().plot({title: `${clicks} clicks`, width});
  currentChart?.replaceWith(chart);
  return (currentChart = chart);
}
```

<div class="grid">
  <div class="card">
    ${resize((width) => updateChart({width}))}
  </div>
</div>

```js
updateChart({clicks});
```

I made a similar suggestion in #1567 (comment).

Maybe we could add something special to Framework that detects when resize is being used, and somehow synchronously invokes the renderer rather than waiting for the ResizeObserver to invoke the callback. 🤔

[Fil]

tracking issue #1571