carbon-components-svelte
carbon-components-svelte copied to clipboard
TextInput `number` type is not compatible with HTML `step` attribute
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.
For number inputs, use the NumberInput component. I wouldn't think the intention is for TextInput to be used with type="number".
The NumberInput component does not behave well with numbers like 1.1. Using TextInput with type=number is the only workaround.
Refers to #1873