framework
framework copied to clipboard
use event.target.value in Generators.input
Currently when you wrap an interactive element in a div, maybe for aesthetic reasons, or because you want to add a title, use the resize helper, etc., you can't use Generators.input to read the value — or you need to copy the value somehow to the top-level element, as we do in Plot with the figure element.
This, even though the input event bubbles up, which makes Generators.input slightly inconsistent.
This change makes Generators.input read the value on the input event’s target, making the most of the input event.
```js echo
function scatterPlot(width) {
return Plot.plot({
width,
marks: [Plot.dot(cars, { x: "power (hp)", y: "economy (mpg)", tip: true })]
})};
```
<div id=chart class="grid grid-cols-1">
<div class="card">${resize((width) => scatterPlot(width))}</div>
</div>
```js echo
const v = Generators.input(document.getElementById("chart"));
```
<pre>${JSON.stringify(v, null, 2)}</pre>
Note: if there are several inputs inside the "chart", so that whichever input (chart) you're touching returns its value. To combine values, you still need to use Inputs.form (but maybe Inputs.form could benefit from the same treatment?)
(OP: https://github.com/observablehq/framework/discussions/1806#discussioncomment-11211770)
Leaving as a draft as there may be unwanted consequences that I'm not seeing. Though I guess a developer should explicitly opt out of event bubbling if they don't want to expose the input up in the hierarchy?
Three tests fail, but unrelated to what the change does; it's due to changes in the hash instead. I've filed https://github.com/observablehq/framework/pull/1809 to fix that, independently.