bug in Inputs.bind(Inputs.range()): cannot enter number with a decimal point

[KenNeighbors]

Describe the bug
I create an Inputs.range slider with no "step" specified because I want to be able to enter any floating-point number. I then create an Inputs.bind in a different location in my notebook. However, I am only able to enter integer numbers. The browser will not let my type a decimal point. The only exception is if I completely delete the number and type a number starting with a decimal point.

To Reproduce
Create two javascript cells in an Observable Notebook:

viewof range = Inputs.range([0, 100])
Inputs.bind(Inputs.range([0, 100]), viewof range)

Then try to type "50.5" in the second input.

Example Notebook

Expected behavior
I expect the bound input to behave the same as the source input: let me type a number with a decimal point.

Desktop (please complete the following information):

• OS: Linux
• Browser: Firefox, Chrome
• Version: 128.9.0esr, 136.0.7103.59

[mootari]

This works correctly for me in Chrome. The difference between Chrome and Firefox appears to be that Firefox dispatches an input event when you enter a decimal separator.

[mbostock]

Yep, it’s a bug. Here’s a fix:

function bind(target, source, invalidation = disposal(target)) {
  let active;
  const sourceEvent = eventof(source);
  const onsource = () => active || set(target, source);
  const ontarget = () => (active = true, set(source, target), source.dispatchEvent(new Event(sourceEvent, bubbles)), active = false);
  set(target, source);
  target.addEventListener(eventof(target), ontarget);
  source.addEventListener(sourceEvent, onsource);
  invalidation.then(() => source.removeEventListener(sourceEvent, onsource));
  return target;
}