carbon-components-svelte icon indicating copy to clipboard operation
carbon-components-svelte copied to clipboard

TextInput `number` type is not compatible with HTML `step` attribute

Open guyo13 opened this issue 2 years ago • 2 comments

The onInput and onChange event handlers inside TextInput component call a parse function which converts the string value into a Number before being dispatched.

  function parse(raw) {
    if ($$restProps.type !== "number") return raw;
    return raw != "" ? Number(raw) : null;
  }

  /** @type {(e: Event) => void} */
  const onInput = (e) => {
    value = parse(e.target.value);
    dispatch("input", value);
  };

  /** @type {(e: Event) => void} */
  const onChange = (e) => {
    dispatch("change", parse(e.target.value));
  };

This behaviour breaks the step and pattern attributes from being used along with number inputs.

Suggested solution: Remove the parse function.

guyo13 avatar Oct 28 '23 08:10 guyo13

For number inputs, use the NumberInput component. I wouldn't think the intention is for TextInput to be used with type="number".

SimpleProgrammingAU avatar Jan 13 '24 09:01 SimpleProgrammingAU

The NumberInput component does not behave well with numbers like 1.1. Using TextInput with type=number is the only workaround.

Refers to #1873

kennethklee avatar Mar 05 '24 15:03 kennethklee