Custom viewof that responds only to submit

Community Help
1

Here’s a form that I’ve created:

You can edit either input element and the output doesn’t update until you hit the ‘submit’ button. If you examine the actual notebook closely, however, you might notice the gray bar on the left side flashing, indicating that the output cell is indeed updating - just not with updated values.

So, my basic question is - how can I avoid update until I hit the submit button?

Here is the actual practical application:

In that notebook, there are several cells that update in response to the form. The operation is more expensive, though, so there’s a lag while editing some cells.

2

Try adding this to prevent the input event from the Inputs.text from bubbling up:

  d3.select(a_input)
    .on("input", e => e.stopPropagation())
1 Like
3

Much better - thanks!

4

Note that @tomlarkworthy’s view helper now includes a cautious() helper with which you can require explicit submitting:

import {view, cautious} from '@tomlarkworthy/view'

viewof output = cautious((apply, reset) => view`<div class=my-form>
<style>
.my-form div {display: inline-block}
.my-form form {width: 90px; display: inline-flex; margin-right: 10px}
.my-form label {width:15px !important}
button {font: 13px var(--sans-serif)}
</style>
${['a', Inputs.text({ label: tex`a:`, value: 'hi' })]}
${['b', Inputs.text({ label: tex`b:`, value: 'there' })]}
<button onclick=${apply}>submit</button>
`)