<select multiple>...</select> yielding value that's 1 interaction old

Here’s the notebook I’m working on https://beta.observablehq.com/@argyleink/an-es6-async-await-functional-programming-party

At the bottom is a multiselect (following a linked inputs pattern), that returns an array as a value on the node, and that value I use with a notebook function to show the map. The issue is that the user interaction with the multiselect is delayed. It feels like a value/generator issue. next() is returning the previous value and putting the current value in the stack for the next value.

Is this a bug with how I’m trying to use the select box?
Is there somewhere I need to yield a statement to get the engine on track?

The demo feels wonky as it is now, and me and any user is unsure if it’s the demo code or ObservableHQ that’s got the issue.

Here’s a gif of the repro

It seems to me just to be a DOM focus/blur input-vs.-change issue.

Try changing your onchange to oninput. That works well for me.

1 Like

boom, that fixes it.