how to resolve a conundrum of promises and Observable inputs?

Community Help
1

I am trying to use Observable as an interface for editing data and have encountered a challenge using Observable inputs due to their behavior as promises. I would like to both understand it and adjust for it.

Using @jashkenas/inputs I created a series of inputs for a survey. If I supply any value to the input that is not among its ‘options’, the input returns a promise (Part 1, below). [Edit: This looks like an issue particularly for radio inputs]

Since I need these values to resolve in order for a linked cell to also return a value (rather than a promise), I try wrapping the input with Object.assign( [**input**] ), {value: Promise.resolve("")}). This is great. It gives me the ability to supply data values into the input, and the input is aware that it’s receiving an initial value that matches an option (it looks like ‘yes’ is checked’. However the input is also self-aware—it knows that it is a promise, and it knows whether or not it has been invoked—so if a person doesn’t click, the value of the input cell will returns the value set using Promise.resolve("") rather than the value supplied into it (Part 2, below).

Ouch! This means that when I try to group my inputs and save them again, any pre-exiting values that appear to be supplied will get overwritten by whatever value I am using to resolve my promise. The only way around this that I can currently see is to create (and then hide) an input that matches my “blank” value, but this doesn’t seem like “the right” way.

Any tips for a good way around this?

Although it’s linked in the frame above, here’s a notebook link for easier clicking:

Note: Interacting with the Part 2 toggle will change its value, at which point the value is passed to gathered_data. My issue is that the ‘resolved promise’ value overwrites the supplied value. If you interact with Part 2 before Part 1, you will not see this change in the gathered_data object, since it will be waiting to resolve. Watch what happens in other_toggle_view under Part 2 before and after you click the toggle.

Observation: It’s looking like the issue is particular to the radio input

2

The current behaviour of a radio is to not resolve until the user actually chooses something. In 90% of cases this makes sense. I would expect setting the value to work for the initial value, maybe it’s a missing feature, but a work around is to build the input and set the value manually from the outside.

viewof r1 = {
  const input = radio({
    title: 'Contact Us',
    description: 'Please select your preferred contact method',
    options: [

      { label: 'By Email', value: 'email' },
      { label: 'By Phone', value: 'phone' },
      { label: 'By Pager', value: 'pager' },
      { label: 'By Pager', value: 'pager' },
    ],
  })
  input.value = "yo"
  return input
}
2 Likes
3

Thank you, Tom. This works! And so much better than creating a dummy option that I don’t wish to show !

1 Like