breaking(text-input): bind:value, support null type for value

This commit is contained in:
Eric Liu 2022-02-02 19:03:07 -08:00
commit 173d416f14

View file

@ -6,14 +6,14 @@
export let size = undefined; export let size = undefined;
/** /**
* Specify the input value * Specify the input value.
* @type {number | string} *
* `value` will be set to `null` if type="number"
* and the value is empty.
* @type {null | number | string}
*/ */
export let value = ""; export let value = "";
/** Specify the input type */
export let type = "";
/** Specify the placeholder text */ /** Specify the placeholder text */
export let placeholder = ""; export let placeholder = "";
@ -75,6 +75,9 @@
$: isFluid = !!ctx && ctx.isFluid; $: isFluid = !!ctx && ctx.isFluid;
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
$: warnId = `warn-${id}`; $: warnId = `warn-${id}`;
$: if ($$restProps.type === "number" && value !== "") {
value = value === "" ? null : Number(value);
}
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -162,8 +165,7 @@
id="{id}" id="{id}"
name="{name}" name="{name}"
placeholder="{placeholder}" placeholder="{placeholder}"
type="{type}" bind:value
value="{value ?? ''}"
required="{required}" required="{required}"
readonly="{readonly}" readonly="{readonly}"
class:bx--text-input="{true}" class:bx--text-input="{true}"
@ -174,9 +176,6 @@
class="{size && `bx--text-input--${size}`}" class="{size && `bx--text-input--${size}`}"
on:change on:change
on:input on:input
on:input="{({ target }) => {
value = type === 'number' ? Number(target.value) : target.value;
}}"
on:keydown on:keydown
on:keyup on:keyup
on:focus on:focus